JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgithub.com/kenwheeler/slick/master/slick/slick.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css">
<div class="slideshow">
<img src="http://lorempixel.com/200/100" />
<img src="http://lorempixel.com/200/101" />
<img src="http://lorempixel.com/200/102" />
</div>
CSS
.slick-counter{
position:absolute;
top:5px;
left:5px;
background:yellow;
padding:5px;
opacity:0.8;
border-radius:5px;
}
JavaScript
var $el = $('.slideshow');
$el.slick({
slide: 'img',
autoplay: true,
onInit: function(e){
$el.append('<div class="slick-counter">'+ parseInt(e.currentSlide + 1, 10) +' / '+ e.slideCount +'</div>');
},
onAfterChange: function(e){
$el.find('.slick-counter').html(e.currentSlide + 1 +' / '+e.slideCount);
}
});