JSFiddle - React, Tailwind, and code Playground

by yoni sidi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css">
  <div class='slider-for'>
    <div index="0"><img src="https://i.cdn.turner.com/nba/nba/.element/img/4.0/global/logos/512x512/bg.white/svg/CLE.svg" width=25%></div>
    <div index="1"><img src="https://i.cdn.turner.com/nba/nba/.element/img/4.0/global/logos/512x512/bg.white/svg/GSW.svg" width=50%></div>
        <div index="2"><img src="https://i.cdn.turner.com/nba/nba/.element/img/4.0/global/logos/512x512/bg.white/svg/BOS.svg" width=40%></div>
  </div>
  
  <div class='slider-nav'>
    <div index="0"><img src="https://i.cdn.turner.com/nba/nba/.element/img/4.0/global/logos/512x512/bg.white/svg/CLE.svg" width=25%/></div>
    <div index="1"><img src="https://i.cdn.turner.com/nba/nba/.element/img/4.0/global/logos/512x512/bg.white/svg/GSW.svg" width=25%/></div>
        <div index="2"><img src="https://i.cdn.turner.com/nba/nba/.element/img/4.0/global/logos/512x512/bg.white/svg/BOS.svg" width=25%/></div>
  </div>

CSS

.slick-slide {
  text-align: center;
  color: #419be0;
  background: white;
  width: 80%;
}

.slick-list {
  text-align: center;
  width: 80%;
}

JavaScript

$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  initialSlide: 1,
  arrows: false,
  fade: true,
  adaptiveHeight: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});