圆滑的轮播显示两行而不是一行 [英] Slick carousel shows two rows instead of one

问题描述

我正在建立一个网站，并且正在将 Slick 轮播用于某些滑块.我遇到一个问题，我将其设置为3张幻灯片，并且如果有3张以上的幻灯片，则可以显示两行，但是，当有3张幻灯片时，出于某种原因，它只能将它们显示为两行.这是 JSFiddle 进行演示.

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.

这是JavaScript代码:

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.

有什么想法吗?

推荐答案

您可以通过获取幻灯片的总数，然后有条件地定义rows设置的值来实现此目的.您还应该设置slidesPerRow的值.

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);

这篇关于圆滑的轮播显示两行而不是一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！