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?

Cannot

Should each scroll move 1 slide in each row or should it move 3 in each? What are you responsive specs, meaning how do you want it to show in different view width? – Inexpressive

destktop mode: slidesToShow: 3, slidesToScroll: 3 ; mobile mode: slidesToShow: 1, slidesToScroll: 1 – Cannot

#33801122 – Jointress

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.

Nonanonage

can you post the changes in slick.js? I am struggling with it. the responsive option does not allow rows to be specified. there is currently a feature request on github for this. – Finny

its not working at all even could not able make any slider – Whiff

@Samia If you are using minified code from version 1.8.1, you can fix this issue by using unminified version. This issue has been fixed in version 1.9.0. Of course you can use the minified code from version 1.9.0 – Weaken

Thanks @Yoan, it worked for me. But autoplay is not working. I have set autoplay: true but still is not working :( – Argeliaargent

Answer 2

This code works almost as needed:

$('slider').slick({
  rows: 2,
  slidesPerRow: 3,
  slidesToShow: 1,
});

Source

Diviner