Как сделать прокрутку slick slider с миниатюрами?

Question

Есть слайдер с миниатюрами (большое и маленькие изображения) Как сделать прокрутку такого слайдера если есть два и более таких слайда?

Код слайдеру тут - https://jsfiddle.net/Grosso2020/73rxzmwo/

var $Slider = $('.slider-win').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  dots: false,
  infinite: false,
  focusOnSelect: true,
  fade: true,
  cssEase: 'linear',

});

$('.slider-item').on('click', function(e) {

  var slideIndex = $(this).data('item');
  
  $(this).addClass('on').siblings().removeClass('on');

  $Slider.slick( 'slickGoTo', parseInt( slideIndex ) - 1 );

  e.preventDefault();
});

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}
.container {
  padding:0 10px 0 10px;
}
img {
  max-width: 100%;
}

.slider-controll {
  display: flex;
  justify-content:space-between;
}

.slider-item {
  width: 150px;
  height: 150xp;
  cursor:pointer;
  border:2px solid transparent;
  display:flex;
  
}

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

.slider-item.on {
  border-color: skyblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
</head>

<body>

<div class="container">
<!-- 1 слайд -->
  <div class="slider">
  <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">
    <div class="slider-item" data-item="1"><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=""></div>
    <div class="slider-item" data-item="2"><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=""></div>
    <div class="slider-item" data-item="3"><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=""></div>
    <div class="slider-item" data-item="4"><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-item" data-item="4"><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>
  </div>
  <!-- 2 слайд -->
  <div class="slider">
  <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">
    <div class="slider-item" data-item="1"><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=""></div>
    <div class="slider-item" data-item="2"><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=""></div>
    <div class="slider-item" data-item="3"><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=""></div>
    <div class="slider-item" data-item="4"><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-item" data-item="4"><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>
  </div>
</div>
</body>
</html>

БЛОГ НА HUSL

Как сделать прокрутку slick slider с миниатюрами?

Ответы (0 шт):