Slick carousel shows two rows instead of one

问题

I am building a website and I am using the Slick carousel for some sliders. I run into an issue where I have it set up with 3 slides and the option to show two rows if there are more than 3 slides, however, when there are 3 slides only it shows them in two rows for some reason. Here is a JSFiddle demonstrating it.

Here is the JavaScript code:

var slickOptions = {
        slidesToShow: 3,
        slidesToScroll: 3,
        rows: 2,
        dots: true,
        arrows: false,
        dotsClass: 'slick-dots slick-dots-black',
        adaptiveHeight: true,
    };
$('#slides').slick(slickOptions);

I tried googling the issue but can't find a solution.

Any ideas?

回答1:

You can accomplish this by getting the total number of slides and then conditionally defining the value of the rows setting. You should also set the value for slidesPerRow.

const numSlides = $('.piece').length;

const slickOptions = {
        
        rows: (numSlides > 3 ? 2 : 1),
        slidesPerRow: 3,
        slidesToShow: (numSlides > 3 ? 1 : 3),
        slidesToScroll: 1,

        dots: true,
        arrows: false,
        dotsClass: 'slick-dots slick-dots-black',
        adaptiveHeight: true
};

$('#slides').slick(slickOptions);

来源：https://stackoverflow.com/questions/62881352/slick-carousel-shows-two-rows-instead-of-one