JSFiddle - React, Tailwind, and code Playground
by Vadim
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css">
<div class="slick">
<div>your content 1</div>
<div>your content 2</div>
<div>your content 3</div>
<div>your content 4</div>
<div>your content 5</div>
<div>your content 6</div>
<div>your content 7</div>
<div>your content 8</div>
<div>your content 9</div>
<div>your content 10</div>
<div>your content 1</div>
<div>your content 2</div>
<div>your content 3</div>
<div>your content 4</div>
<div>your content 5</div>
<div>your content 6</div>
<div>your content 7</div>
<div>your content 8</div>
<div>your content 9</div>
<div>your content 10</div>
<div>your content 1</div>
<div>your content 2</div>
<div>your content 3</div>
<div>your content 4</div>
<div>your content 5</div>
<div>your content 6</div>
<div>your content 7</div>
<div>your content 8</div>
<div>your content 9</div>
<div>your content 10</div>
<div>your content 1</div>
<div>your content 2</div>
<div>your content 3</div>
<div>your content 4</div>
<div>your content 5</div>
<div>your content 6</div>
<div>your content 7</div>
<div>your content 8</div>
<div>your content 9</div>
<div>your content 10</div>
</div>
<output id="counter"></output>
JavaScript
$('.slick').slick({
slidesToShow: 4,
slidesToScroll: 4
})
$('.slick').on('afterChange', function(event, slick, currentSlide, nextSlide){
// Находим сколько всего "страниц"
var totalPages = Math.ceil(slick.slideCount / slick.originalSettings.slidesToScroll);
// Зная, что в каждой "странице" по 2 слайда, а нумерация слайдов начинается с нуля,
// делим номер текущего слайда +1 на количество слайдов за прокрутку, с округлением вверх.
var currentPage = Math.ceil((currentSlide + 1) / slick.originalSettings.slidesToScroll)
// Пишем в счётчик
counter.innerText = currentPage + '/' + totalPages
});