CODEWITHSUNDEEP
javascriptjqueryslick.js
kurtko
kurtko

Reputation: 2126

Slick carousel in two rows left to right

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

enter image description here

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?

Upvotes: 19

Views: 66990

Answers (2)

Pavel Khabusov
Pavel Khabusov

Reputation: 1

This code works almost as needed:

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

Source

Upvotes: 0

Yoan
Yoan

Reputation: 2197

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.

Upvotes: 28

Related Questions