JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css">

<div class="slider">
  <div data-title="item 1"><img src="http://placehold.it/350x150" alt=""></div>
  <div data-title="item 2"><img src="http://placehold.it/350x150" alt=""></div>
  <div data-title="item 3"><img src="http://placehold.it/350x150" alt=""></div>
  <div data-title="item 4"><img src="http://placehold.it/350x150" alt=""></div>
</div>

CSS

.slider {
  max-width: 500px;
  margin: auto;
}

.slider img {
  display: block;
  
  max-width: 100%;
  
  outline: 1px solid #fff;
}

.slick-dots {
  margin: 0;
  padding: 0;
  
  list-style: none;
  
  text-align: center;
}

.slick-dots li {
  display: inline-block;
  
  margin: 0 2px;
  padding: 4px 8px;
  
  background: #eee;
  border: 1px solid #ccc;
  
  cursor: pointer;
}

JavaScript

$('.slider').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  dots: true,
  customPaging: function(slider, i) {
    
    return slider.$slides.eq(i).data('title');
    
  }
});