Slick Carousel v1.9.0

For more information please check Full Github Documentation.

Here is a coded example:

<div class="row">
  <div class="col-md-12 col-md-6">
    <section class="light slider">
      <div>
        <img src="/assets/img/mark-harrison.jpg" height="500" width="450">
      </div>
      <div>
        <img src="/assets/img/steven-roe.jpg" height="500" width="450">
      </div>
      <div>
        <img src="/assets/img/rezaul-karim.jpg" height="500" width="450">
      </div>
      <div>
        <img src="/assets/img/pawel-nolbert.jpg" height="500" width="450">
      </div>
      <div>
        <img src="/assets/img/serge-kutuzov.jpg" height="500" width="450">
      </div>
    </section>
  </div>
</div>
<!-- javascript for the init -->

$(".light").slick({
  dots: false,
  infinite: true,
  centerMode: true,
  slidesToShow: 4,
  slidesToScroll: 1,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1,
        infinite: true,
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});