JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<div class="slider">
  <div>111</div>
  <div>111</div>
  <div>111</div>
  <div>111</div>
  <div>111</div>
  <div>111</div>
  <div>111</div>
</div>

JavaScript

$('.slider').slick({
	dots: true,
  arrows: false
});

$('.slick-dots').prepend('<li><a class="prev-btn" href="#">Prev</a></li>');
$('.slick-dots').append('<li><a class="next-btn" href="#">Next</a></li>');

$(document).on('click', '.prev-btn', function(e) {
	e.preventDefault();
  $('.slider').slick('slickPrev');
});

$(document).on('click', '.next-btn', function(e) {
	e.preventDefault();
  $('.slider').slick('slickNext');
});