Slick carousel shows two rows instead of one

Question

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

Answer 1

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