responsive-slider

by dxokoya

HTML

<head>
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css" />
</head>

<body>
  <div class="slider">
    <div><img class="slide-img" src="http://placekitten.com/200/200" alt=""></div>
    <div><img class="slide-img" src="http://placekitten.com/200/200" alt=""></div>
    <div><img class="slide-img" src="http://placekitten.com/200/200" alt=""></div>
    <div><img class="slide-img" src="http://placekitten.com/200/200" alt=""></div>
    <div><img class="slide-img" src="http://placekitten.com/200/200" alt=""></div>
    <div><img class="slide-img" src="http://placekitten.com/200/200" alt=""></div>
    <div><img class="slide-img" src="http://placekitten.com/200/200" alt=""></div>
    <div><img class="slide-img" src="http://placekitten.com/200/200" alt=""></div>
  </div>

  <footer>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
  </footer>
</body>

SCSS

.slider {
  margin: 0 auto;
  max-width: 600px;
  height: 200px;
}

.slick-arrow {
  &.slick-prev {
    left: 10px;
    z-index: 2;
  }

  &.slick-next {
    right: 10px;
    z-index: 2;
  }
}

.slide-img {
  width: 100%;
  height: 200px;
  object-fit: contain;
}

JavaScript

$('.slider').slick({
  autoplay: true,
  dots: true,
  infinite: false,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [{
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 768,
      settings: {
        autoplay: false,
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});