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 id="nums" 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

$('.slider').each(function(){

	var $status = $('#nums');
  var slidesToScroll = 2;
	var $slickElement = $(this);
  
	$slickElement.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){
  
    var groups = Math.ceil(slick.slideCount / slidesToScroll);
    var slide = (currentSlide ? currentSlide : 0) + 1;
    var group = Math.ceil(slide / slidesToScroll);

    $status.text(group + '/' + groups);
  });

	$slickElement.slick({
		slidesToShow: 3,
		slidesToScroll: slidesToScroll,
		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');
		});

});