Подскажите пожалуйста как это реализовать?

Question

Подскажите как реализовать это в коде? Нужно что бы нажимая на переключатель менялась картинка и слайдер который справа переключался на цифру 2 и тд

Answer 1

Тебе надо два слайдера, один управляет другим, элементарно на slick, у него есть функция master-slave. Кнопки влево-вправо сам допилишь:

$(document).ready(function(){
  $('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
    fade: true,
    asNavFor: '.slider-nav'
  });
  $('.slider-nav').slick({
    slidesToShow: 4,
    asNavFor: '.slider-for',
    dots: false,
    arrows: false,
    vertical: true,
    focusOnSelect: true
  });
});

.slider{display:flex}
.slider-for{width:75%;position:relative;}
.slick-arrow{position:absolute;right:0;z-index:2;width:24px;height:24px;background:#ddd;color: transparent;}
.slick-next{bottom:24px}
.slick-next:after{color:#000;position:absolute;left:0;right:0;content:'>';}
.slick-prev{bottom:0}
.slick-prev:after{color:#000;position:absolute;left:0;right:0;content:'<';}
.slider-nav{width:15%}
.slider-for img {
width: 120px;height:auto
}
.slider-nav img {
width: 40px;height:auto
}
.slider-nav span.slick-slide{text-align:right;line-height:60px;height:60px;width:100%;display:block;font-size:12px}
.slider-nav span.slick-current{font-size:48px}
.slider-nav .slick-track {
    opacity: 1;
    height: 248px;
    transform: none !important;
}

<link href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<div class="slider">
<div class="slider-for">
<img src="https://source.unsplash.com/iPum7Ket2jo/800x600" alt="">
<img src="https://source.unsplash.com/E4944K_4SvI/800x600" alt="">
<img src="https://source.unsplash.com/F5Dxy9i8bxc/800x600" alt="">
<img src="https://source.unsplash.com/s48nn4NtlZ4/800x600" alt="">
</div>
<div class="slider-nav">
<span>01</span><span>02</span><span>03</span><span>04</span>
</div>
</div>

БЛОГ НА HUSL

Подскажите пожалуйста как это реализовать?

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