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,
 responsive: [
     {
     breakpoint: 768,
     settings: {
        slidesToShow: 1           
     }
    }
  ]            
}); 

I get this order:

1  3  5  7  9  11
2  4  6  8  10 12

This solution is not good for me because I'm using 1 slides to show in responsive mode: How can I create a carousel with multiple rows?

Any ideas?

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.