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

Question

我正在建立一个网站，我正在为一些滑块使用Slick 轮播。我遇到了一个问题，我将其设置为 3 张幻灯片，并且如果幻灯片超过 3 张，则可以选择显示两行，但是，当只有 3 张幻灯片时，出于某种原因，它会在两行中显示它们。这是一个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);