JSFiddle - React, Tailwind, and code Playground

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">
  <div class="slide-placeholder"><p>Slide 1</p></div>
  <div class="slide-placeholder"><p>Slide 2</p></div>
  <div class="slide-placeholder"><p>Slide 3</p></div>
  <div class="slide-placeholder"><p>Slide 4</p></div>
</div>

CSS

.slide-placeholder {
  height: 250px;
  width: 100%;
  position: relative;
}

.slick-slide:nth-child(odd) .slide-placeholder {
  background: #ccc;
}

.slick-slide:nth-child(even) .slide-placeholder {
  background: #bbb;
}

.slide-placeholder p {
  font-size: xx-large;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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)
  var i = (currentSlide ? currentSlide : 0) + 1;
  $status.text(i + '/' + slick.slideCount);
});

$slickElement.slick({
  autoplay: true,
  dots: true
});