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 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.

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.

Any ideas?

Answer 1

I created a functional example using Slick version 1.8.1.

On small screens: 1 row with 1 item at a time.

On medium screens: 3 rows with 2 items at a time.

On large screens: 2 rows with 3 items at a time.

The code is simple. I added some repetitions because I used Tailwind's breakpoints, but repeating them isn't necessary.

// https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.x.x/slick/slick.js
// minified version NOT WORK!

$(() => { // onReady
    const $sliderContainer = $("#slider-container")
    const settings = {
        slidesToShow: 1,
        rows: 1,
        slidesPerRow: 1,
        responsive: [{
            breakpoint: 640, // sm
            settings: {
                rows: 1,
                slidesPerRow: 1
            }
        }, {
            breakpoint: 768, // md
            settings: {
                rows: 3,
                slidesPerRow: 2
            }
        }, {
            breakpoint: 1024, // lg
            settings: {
                rows: 3,
                slidesPerRow: 2
            }
        }, {
            breakpoint: 1280, // xl
            settings: {
                rows: 3,
                slidesPerRow: 2
            }
        }, {
            breakpoint: 1536, // 2xl
            settings: {
                rows: 2,
                slidesPerRow: 3
            }
        }, {
            breakpoint: Infinity, // 2xl+
            settings: {
                rows: 2,
                slidesPerRow: 3
            }
        }]
    }
    $sliderContainer.slick(settings)
})

body {
    margin: 0;
  overflow-x: hidden;
}

.slick-slide div {
    height: 200px;
    background-color: #ddd;
}

<link href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.x.x/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.x.x/slick/slick.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.x.x/slick/slick.js"></script>
<!-- NOT WORK WITH 1.8.1 MINIFIED! BUG /slick/issues/3277 -->

<div id="slider-container">
    <div><h1>1</h1></div>
    <div><h1>2</h1></div>
    <div><h1>3</h1></div>
    <div><h1>4</h1></div>
    <div><h1>5</h1></div>
    <div><h1>6</h1></div>
    <div><h1>7</h1></div>
    <div><h1>8</h1></div>
    <div><h1>9</h1></div>
    <div><h1>10</h1></div>
    <div><h1>11</h1></div>
    <div><h1>12</h1></div>
</div>

Answer 2

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