Slick - Responsive SlidesToShow Bug

by Pedro Marcano

HTML

<script src="//cdn.jsdelivr.net/jquery.slick/1.5.8/slick.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.5.8/slick.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.5.8/slick-theme.css">
<div class="slick-slider">
    <div class="slick-slider__slide">1</div>
    <div class="slick-slider__slide">2</div>
    <div class="slick-slider__slide">3</div>
    <div class="slick-slider__slide">4</div>
    <div class="slick-slider__slide">5</div>
    <div class="slick-slider__slide">6</div>
    <div class="slick-slider__slide">7</div>
</div>

CSS

.slick-slider__slide {
    height: 250px;
    margin: 0.4em;
    text-align: center;
    color: #000;
}

.slick-slider__slide:nth-child(even) {
    background-color: #cccccc;
}

.slick-slider__slide:nth-child(odd) {
    background-color: #aaaaaa;
}

.slick-prev {
    left: 5px;
    z-index: 1000;
}

.slick-next {
    right: 5px;
    z-index: 1000;
}

JavaScript

$(document).ready(function(){
    $('.slick-slider').slick({
      dots: false,
      infinite: true,
      speed: 300,
      slidesToShow: 3,
      slidesToScroll: 1,
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 1
          }
        },
        {
          breakpoint: 800,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 1
          }
        },
        {
          breakpoint: 500,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
        // You can unslick at a given breakpoint now by adding:
        // settings: "unslick"
        // instead of a settings object
      ]
    });
});