JSFiddle - React, Tailwind, and code Playground

by kospocov_v

HTML

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<div class="bigslider">
			<div class="slider__item ">
				<img src="https://via.placeholder.com/600x400/" alt="">
			</div>

			<div class="slider__item">
				<img src="https://via.placeholder.com/600x399/" alt="">
			</div>

			<div class="slider__item">
				<img src="https://via.placeholder.com/600x398/" alt="">
			</div>

			<div class="slider__item">
				<img src="https://via.placeholder.com/600x401/" alt="">
			</div>
</div>

<div class="minislide">
			<div class="slider__item ">
				<img src="https://via.placeholder.com/250x200/" alt="">
			</div>

			<div class="slider__item">
				<img src="https://via.placeholder.com/250x199/" alt="">
			</div>

			<div class="slider__item">
				<img src="https://via.placeholder.com/250x198" alt="">
			</div>

			<div class="slider__item">
				<img src="https://via.placeholder.com/250x201" alt="">
			</div>
</div>

SCSS

.bigslider{
  
    outline:1px solid orange;
    position: relative;
    left:150px;
	    .slick-list{
	    	overflow:hidden;
	    }
	    .slick-track{
    		display: flex;
     	}
	}
.minislide{
  .slick-current{
    outline:5px solid orange;
  }
  .slider__item{
    margin:7px;
  }
  .slick-list{
    overflow:hidden;
  }
  .slick-track{
    display: flex;
  }
}

JavaScript

$('.bigslider').slick({
		arrows:false,
		speed:300,
		asNavFor: '.minislide',

	});
  
  $('.minislide').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    focusOnSelect: true,
    arrows:false,
    asNavFor: '.bigslider',
    variableWidth:true,
  });