Карусель показывает две строки вместо одной

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

Я попытался найти в Google проблему, но не нашел решения *. 1010 *

Есть идеи?

Answer 1

Вы можете достичь sh этого, получив общее количество слайдов и затем условно определив значение параметра 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);