Javascript 光滑的旋转木马显示两行而不是一行

我正在建立一个网站，我正在使用一些滑块旋转木马。我遇到了一个问题，我将它设置为3张幻灯片，如果有3张以上的幻灯片，可以选择显示两行，但是，当有3张幻灯片时，出于某种原因，它会将它们显示为两行。这是一个演示它的例子

以下是JavaScript代码：

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

我试着用谷歌搜索这个问题，但找不到解决办法

---

有什么想法吗？

您可以通过获取幻灯片总数，然后有条件地定义

行设置的值来实现这一点。您还应该设置
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);

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

这解决了问题，但也带来了另一个问题。现在，由于某些原因，平滑轨迹没有占据父元素的全部宽度。知道为什么吗？这里是JSFIDLE：我认为您可以通过根据幻灯片的数量改变
slidesToShow
并设置
slidesToScroll:1
来解决这个问题。我在上面的答案中添加了这些更改。这并没有解决问题，这是非常奇怪的行为。。。在jsfiddle中尝试一下这对我来说在你的jsfiddle中很有用，如果你在每张幻灯片中插入一些文本内容，那就更明显了。我看到的另一个问题是，当您只有一行时，Slick会用自己的幻灯片id（例如，
id=“slide-4”
）替换您的幻灯片id，因此您会丢失自己的背景颜色。如果我只是在JSFIDE中将代码放在上面而不是您的代码，我会看到3和5张幻灯片的全宽幻灯片。您是否对设置进行了其他更改？这解决了问题，但也带来了另一个问题。现在，由于某些原因，平滑轨迹没有占据父元素的全部宽度。知道为什么吗？这里是JSFIDLE：我认为您可以通过根据幻灯片的数量改变
slidesToShow
并设置
slidesToScroll:1
来解决这个问题。我在上面的答案中添加了这些更改。这并没有解决问题，这是非常奇怪的行为。。。在jsfiddle中尝试一下这对我来说在你的jsfiddle中很有用，如果你在每张幻灯片中插入一些文本内容，那就更明显了。我看到的另一个问题是，当您只有一行时，Slick会用自己的幻灯片id（例如，
id=“slide-4”
）替换您的幻灯片id，因此您会丢失自己的背景颜色。如果我只是在JSFIDE中将代码放在上面而不是您的代码，我会看到3和5张幻灯片的全宽幻灯片。您是否正在对设置进行其他更改？