Slick show 2 row, 6 items on desktop and 1 row, 1 item on mobile

Question

Could someone help me figure out why my code isn't working? I'm trying to accomplish 2 rows and 6 items on the full width and 1 row with 1 item on mobile.

$('.your-class').slick({
        slidesToShow: 1,
  rows:2,
  slidesPerRow: 3,
    responsive: [{ 
        breakpoint: 500,
        settings: {
            arrows: true,
            infinite: false,
              rows:1,
  slidesPerRow: 1,
            slidesToShow: 1,    
        } 
    }]
});

<div class="your-class">
      <div class="">your content</div>
      <div class="">your content</div>
      <div class="">your content</div>
      <div class="">your content</div>
      <div class="">your content</div>
      <div class="">your content</div>
</div>

http://codepen.io/Kibs/pen/aNzvBG

thanks

Answer 1

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)

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.

Answer 2

This amend has been merged https://github.com/kenwheeler/slick/commit/34612b42641e8fd4250f70666a8da67eb624d002

but WARNING: it has some troubles https://github.com/kenwheeler/slick/issues/3110