JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css">
<section class="top_slider">
  <div class="slide">
    <img src="https://unsplash.it/400/250">
    <h2>text 1</h2>
  </div>
  <div class="slide">
    <img src="http://placehold.it/400x250">
    <h2>text 2</h2>
  </div>
  <div class="slide">
    <img src="https://unsplash.it/400/250">
    <h2>text 3</h2>
  </div>
</section>

CSS

li.active{
	font-weight:bold;
}
h2 {
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 color: white;
 font-size: 46px;
 -webkit-transition: all 300ms ease;
 transition: all 300ms ease;
 text-transform: uppercase;
}
.slide {
  position: relative;
}

JavaScript

$(document).ready(function() {
  $('.top_slider').each(function(){
		const headers=$(this).find('.slide h2').map(function(){
			return '<li>'+$(this).html()+'</li>';
		}).toArray();
		
		$(this).before(
			$('<ul></ul>').append(headers).find('li:first').addClass('active').end()
		);
	}).on('afterChange',function(e,slick,index){
		$(this).prev().find('li').removeClass('active').eq(index).addClass('active');
	}).slick({
    dots: true,
    infinite: true,
    //              centerMode: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    //              centerPadding: '220px',
    arrows: true,
    prevArrow: '<button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button" style="display: block;">Previous</button>',
    nextArrow: '<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;">Next</button>'

  });
$('ul:first-child li').addClass('нужный_класс');
});