JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<!-- <div class="carousel">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>
<div class="carousel-nav">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>
<br><br><br><br><br> -->


<div class="carousel">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>
<div class="carousel-nav">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
 </div>

CSS

.slick-slide {
  text-align: center;
  border: 1px solid #666
}
.slick-center {
  border: 1px solid red
}

JavaScript

$('.carousel').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.carousel-nav'
});
$('.carousel-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  dots: false,
  arrows: true,
  centerMode: true,
  centerPadding: 0,
  focusOnSelect: true,
  responsive: [{
    breakpoint: 769,
    settings: {
      slidesToShow: 3,
    }
  }]
});