JSFiddle - React, Tailwind, and code Playground

by Ketan Patel

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css">
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<div class="container">
  <h1>Slider</h1>
      <div class="slider center">       
          <div class="slide">
            <div class="cl cl-yellow"></div>
          </div>
          <div class="slide">
            <div class="cl cl-blue"></div>
          </div>
          <div class="slide">
            <div class="cl cl-red"></div>
          </div>
        <div class="slide">
            <div class="cl cl-yellow"></div>
          </div>
          <div class="slide">
            <div class="cl cl-blue"></div>
          </div>
          <div class="slide">
            <div class="cl cl-red"></div>
          </div>
          
      </div>
      <div class="pagination"></div>
</div>

JavaScript

var $st = $('.pagination');
var $slickEl = $('.center');

$slickEl.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
  var i = (currentSlide ? currentSlide : 0) + 1;
  $st.text(i + ' of ' + slick.slideCount);
});

$slickEl.slick({
  centerMode: true,
  centerPadding: '100px',
  slidesToShow: 5,
  focusOnSelect: true,
  dots: false,
  infinite: true,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});