JSFiddle - React, Tailwind, and code Playground

by Ayri Rin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<span class="pagingInfo"></span>

<div class="slideshow">
    <img src="http://lorempixel.com/500/250" />
    <img src="http://lorempixel.com/500/251" />
    <img src="http://lorempixel.com/500/249" />
    <img src="http://lorempixel.com/500/248" />
    <img src="http://lorempixel.com/500/247" />
    <img src="http://lorempixel.com/500/252" />
    <img src="http://lorempixel.com/500/253" />
    <img src="http://lorempixel.com/500/254" />
    <img src="http://lorempixel.com/500/255" />
</div>

JavaScript

var $status = $('.pagingInfo');
var $slickElement = $('.slideshow');

$slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
  //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
  if(!slick.$dots){
  	return;
  }
  
  var i = (currentSlide ? currentSlide : 0) + 1;
  $status.text(i + '/' + (slick.$dots[0].children.length));
});

$slickElement.slick({
	infinite: false,
	slidesToShow: 4,
  autoplay: true,
  dots: true
});