JSFiddle - React, Tailwind, and code Playground

by Magni Hansen

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" />
    <img src="http://lorempixel.com/200/103" />
    <img src="http://lorempixel.com/200/104" />
    <img src="http://lorempixel.com/200/105" />
</div>

CSS

.slider-paging-number li:nth-child(1n+2){ display:none; }

JavaScript

$('.slideshow').slick({
    slide: 'img',
    autoplay: false,
    dots: true,
    dotsClass: 'slider-paging-number',
    customPaging: function (slick) { return (slick.currentSlide + 1) + '/' + slick.slideCount; }
}).on('afterChange', function (event, slick, currentSlide) {
	// works with 1.7.1+
	$(this).find('*[role="tablist"]').find('li').eq(0).text(slick.options.customPaging.call(this, slick, currentSlide));
});