Two-row smooth carousel from left to right

Question

I need to make a two-handed carousel with left and right order (also responsive)

FROM

$('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 suitable for me, because I use 1 slides to show in flexible mode: How to create a carousel with several lines?

Any ideas?

Answer 1

You need something like this 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,
      }
    }
  ]
});

which works for me.

And if you want to show only one line on a mobile phone, you have to do it,

You have to change some code in slick.js, so for this you need to use the non-minified js version. So, find these two methods in slick.js:

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

if if (.options.rows > 1) if (.options.rows > 0)

, -.