JSFiddle - React, Tailwind, and code Playground

by Yura

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css">
<script src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<div class="slider-win">
  <img src="https://images.unsplash.com/photo-1544801568-5ec5a66bf3fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" alt="">
  <img src="https://images.unsplash.com/photo-1517327258734-375b7a2aa8d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjI0MX0&auto=format&fit=crop&w=1051&q=80" alt="">
  <img src="https://images.unsplash.com/photo-1523053511548-d31e5927fb25?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
  <img src="https://images.unsplash.com/photo-1524701370974-bf337323869d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60" alt="">
</div>
  
<div class="slider-controll">
  <img src="https://images.unsplash.com/photo-1544801568-5ec5a66bf3fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" alt="">
  <img src="https://images.unsplash.com/photo-1517327258734-375b7a2aa8d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjI0MX0&auto=format&fit=crop&w=1051&q=80" alt="">
  <img src="https://images.unsplash.com/photo-1523053511548-d31e5927fb25?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
  <img src="https://images.unsplash.com/photo-1524701370974-bf337323869d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60" alt="">
</div>

CSS

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
}

.slider-controll .slick-slide {
  width: 150px;
  height: 150xp;
  cursor:pointer;
  border:2px solid transparent;
}

.slider-controll .slick-slide img {
  width: 100%;
  height: 100%;
  object-fit:cover;
  display: block;
}

.slider-controll .slick-slide.slick-current {
  border-color: skyblue;
}

JavaScript

$('.slider-win').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  asNavFor: '.slider-controll',
  arrows: true,
  dots: false,
  infinite: true,
  focusOnSelect: true,
  fade: true,
  cssEase: 'linear',
  
});

$('.slider-controll').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  arrows: true,
  vertical: false,
  dots: false,
  infinite: true,
  asNavFor: '.slider-win',
  focusOnSelect: true,
  centerMode: false,
  variableWidth: true
});