1

I'm trying to set my Slick slideshow to display in center mode with the following code:

// slider
$('.slider-inner').slick({
    centerMode: true,
    centerPadding: '260px',
    dots: 0,
    slidesToShow: 1,
    responsive: [
        {
            breakpoint: 768,
            settings: {
                arrows: false,
                centerMode: true,
                centerPadding: '40px',
                slidesToShow: 1
            }
        },
        {
            breakpoint: 480,
            settings: {
                arrows: false,
                centerMode: true,
                centerPadding: '40px',
                slidesToShow: 1
            }
        }
    ]
});

Desktop layout

Below you can see how it looks on my desktop layout, pretty much exactly how I'd like it (with one photo displayed and the other two cut off):

enter image description here

Tablet layout

But when I view it at 768px wide, I get 3 images displayed just like a standard carousel, despite me setting the responsive options in the code. I find that, no matter what values I set in the responsive options, it has no effect on the tablet layout.

But if I change the default options (e.g. for the desktop layout) then this does have an effect on the mobile layout:

enter image description here

  • Please add meaningful code and a problem description here. Don't just link to the site that needs fixing — otherwise, this question will lose any value to future visitors once the problem is solved or if the site you're linking to is inaccessible. Posting a [Minimal, Reproducible example (or MCVE)](https://stackoverflow.com/help/minimal-reproducible-example) that demonstrates your problem would help you get better answers. For more info, see [Something on my web site doesn't work. Can I just paste a link to it?](https://meta.stackexchange.com/questions/125997/) Thanks! – Alessio Oct 12 '20 at 12:49
  • It would be helpful if you could add your slideshow markup and CSS to the question. – Ed Lucas Oct 12 '20 at 14:55

0 Answers0