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.css">
<div class="slider">
  <div class="slider__item">1</div>
  <div class="slider__item">2</div>
  <div class="slider__item">3</div>
  <div class="slider__item">4</div>
  <div class="slider__item">5</div>
  <div class="slider__item">6</div>
</div>
<div class="slick-nav__wrap">
  <div class="slick-arrow arrow-prev">prev<span></span></div>
  <div class="slides-num"></div>
  <div class="slick-arrow arrow-next">next<span></span></div>
</div>

CSS

.slider__item {
  text-align: center;
  background-color: #eee;
  padding: 50px 0;
}

.slick-nav__wrap {
  display: flex;
  align-items: center;
  margin-top: 30px;
}

.slick-arrow {
  cursor: pointer;
}

.slides-num {
  margin: 0 20px;
}

JavaScript

const
  SLIDES_TO_SHOW = 3,
  $slickElement = $('.slider');

$slickElement.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide) {
  const
    page = Math.ceil(((currentSlide || 0) + 1) / SLIDES_TO_SHOW),
    numPages = Math.ceil(slick.slideCount / SLIDES_TO_SHOW);

  $('.slick-nav__wrap .slides-num', slick.$slider.parent()).text(`${page} / ${numPages}`);
});

$slickElement.slick({
  slidesToShow: SLIDES_TO_SHOW,
  slidesToScroll: SLIDES_TO_SHOW,
  arrows: false,
  infinite: false,
});

$slickElement.parent().find('.slick-nav__wrap .arrow-next').click(function() {
  $slickElement.slick('slickNext');			   
});
$slickElement.parent().find('.slick-nav__wrap .arrow-prev').click(function() {
  $slickElement.slick('slickPrev');
});