JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.js"></script>
<div class="primary nav">
  <div style="background-color:red;">primary 1</div>
  <div style="background-color:yellow;">primary 2</div>
  <div style="background-color:green;">primary 3</div>
  <div style="background-color:yellow;">primary 4</div>
</div>
<div class="navigator">
  <div style="background-color:red;">navigator 1</div>
  <div style="background-color:yellow;">navigator 2</div>
  <div style="background-color:green;">navigator 3</div>
  <div style="background-color:yellow;">navigator 4</div>
</div>
<div class="secondary nav">
  <div style="background-color:red;">secondary 1</div>
  <div style="background-color:yellow;">secondary 2</div>
  <div style="background-color:green;">secondary 3</div>
  <div style="background-color:yellow;">secondary 4</div>
</div>

CSS

.nav {
  border: 1px solid #000;
  text-align: center;
  cursor: pointer;
  min-height:50px;
}

.navigator {
  border: 1px solid #000;
  text-align: center;
  cursor: pointer;
  min-height:50px;
}
.slick-slide {
 min-height:50px; 
}

JavaScript

var slickPrimarySecondary = {
   slidesToShow: 1,
   slidesToScroll: 1,
   arrows: false,
   fade: true,
   infinite: false
 };
 var slickNavigator = {
   slidesToShow: 2,
   slidesToScroll: 1,
   asNavFor: '.nav',
   speed: 500,
   dots: true,
   focusOnSelect:true,
   centerMode: false,
   infinite: false
 };

 $('.primary').slick(slickPrimarySecondary);
 $('.secondary').slick(slickPrimarySecondary);
 
 $('.navigator').slick(slickNavigator)