光滑的轮播显示两行而不是一行

Question

我正在建立一个网站，我正在使用 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 演示它。

这里是 JavaScript 代码：

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

我尝试用谷歌搜索这个问题，但找不到解决方案。

有什么想法吗？

Answer 1

您可以通过获取幻灯片总数然后有条件地定义 rows 设置的值来完成此操作。您还应该设置 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);

光滑的轮播显示两行而不是一行

Slick carousel shows two rows instead of one

javascript

jquery

slick.js