JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

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

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

  </div>
</div>

CSS

.testimonials{
  text-align: center;
}

JavaScript

$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 5, //works if 3 but i want 5 thumbnails
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  //dots: true,
  arrows: false,
  centerMode: true,
  focusOnSelect: true
});