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

$('.slider').each(function(){
	var $status = $('.slides-num');
	var $slickElement = $(this);
	$slickElement.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide){
			    var i = (currentSlide ? currentSlide : 0) + 1;			   
			    $('.slick-nav__wrap .slides-num', slick.$slider.parent()).text(i + '/' + slick.slideCount);
		  });

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

});