JSFiddle - React, Tailwind, and code Playground

by Newton Anbarasu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/jquery-3.1.4.js"></script>
<div class="row slider">
   <div class="">
      <h6 class="company-name">Delivery hero</h6>
    </div>
    <div class="">
      <h6 class="company-name">Delivery hero</h6>
    </div>
    <div class="">
      <h6 class="company-name">Delivery hero</h6>
    </div>
    <div class="">
      <h6 class="company-name">Delivery hero</h6>
    </div>
    <div class="">
      <h6 class="company-name">Delivery hero</h6>
    </div>
    </div>

JavaScript

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