Slick carousel in two rows left to right

Question

I need to make a two lines carousel with left to right order (also responsive)

With:

$(\'slider\').slick({
 rows: 2,
 slidesToShow: 3,
 responsi         


        

Answer 1

You need something like that Template:

<div class="carousel">
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
        <div class=""><img src="/images/app.png" alt=""></div>
    </div>

CSS:

.slick-slide{
  img{
    width: 100%;
  }
}

JS:

$('.carousel').slick({
    dots: true,
    slidesPerRow: 3,
    rows: 2,
    responsive: [
    {
      breakpoint: 478,
      settings: {
        slidesPerRow: 1,
        rows: 1,
      }
    }
  ]
});

that works for me.

And if you want to show on mobile only one row, you should do that,

You have to change some code in slick.js so you have to use the not minified js version to do that. So, find these two methods in slick.js:

• Slick.prototype.buildRows = function() { ... }
• Slick.prototype.cleanUpRows = function() { ... }

and change the if condition from if(.options.rows > 1) to if(.options.rows > 0)

It is a way to fix a problem that currently has slick-carousel.