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 class="slide-placeholder"><p>Slide 5</p></div>
<div class="slide-placeholder"><p>Slide 6</p></div>
<div class="slide-placeholder"><p>Slide 7</p></div>
<div class="slide-placeholder"><p>Slide 8</p></div>
<div class="slide-placeholder"><p>Slide 9</p></div>
<div class="slide-placeholder"><p>Slide 10</p></div>
<div class="slide-placeholder"><p>Slide 11</p></div>
<div class="slide-placeholder"><p>Slide 12</p></div>
<div class="slide-placeholder"><p>Slide 13</p></div>
<div class="slide-placeholder"><p>Slide 14</p></div>
<div class="slide-placeholder"><p>Slide 15</p></div>
<div class="slide-placeholder"><p>Slide 16</p></div>
</div>
CSS
.slide-placeholder {
height: 250px;
width: 100%;
position: relative;
background: #ccc;
}
.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)
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
});