Как изменить поведение Slick Slider?

Question

[Big_Trouble]

<div class="slick">
              <div class="slick-slide"><img src="./model_files/models/girl_2.jpg" alt=""> </div>
              <div class="slick-slide"><img src="./model_files/models/girl_3.jpg" alt=""> </div>
              <div class="slick-slide"><img src="./model_files/models/girl_4.jpg" alt=""> </div>
              <div class="slick-slide"><img src="./model_files/models/girl_5.jpg" alt=""> </div>
              <div class="slick-slide"><img src="./model_files/models/girl_6.jpg" alt=""> </div>
              <div class="slick-slide"><img src="./model_files/models/girl_7.jpg" alt=""> </div>
              <div class="slick-slide"><img src="./model_files/models/girl_9.jpg" alt=""> </div>
              <div class="slick-slide"><img src="./model_files/models/girl_10.jpg" alt=""> </div>
            </div>
            <div class="slick-nav">
              <div class="slick-slide nav"><img src="./model_files/models/girl_2.jpg" alt=""> </div>
              <div class="slick-slide nav"><img src="./model_files/models/girl_3.jpg" alt=""> </div>
              <div class="slick-slide nav"><img src="./model_files/models/girl_4.jpg" alt=""> </div>
              <div class="slick-slide nav"><img src="./model_files/models/girl_5.jpg" alt=""> </div>
              <div class="slick-slide nav"><img src="./model_files/models/girl_6.jpg" alt=""> </div>
              <div class="slick-slide nav"><img src="./model_files/models/girl_7.jpg" alt=""> </div>
              <div class="slick-slide nav"><img src="./model_files/models/girl_9.jpg" alt=""> </div>
              <div class="slick-slide nav"><img src="./model_files/models/girl_10.jpg" alt=""> </div>
            </div>

$('.slick').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: true,
        asNavFor: '.slick-nav',
      });
      $('.slick-nav').slick({
        autoplay: false,
        slidesToShow: 3,
        asNavFor: '.slick',
        dots: false,
        infinite: false,
        arrows: false,
        focusOnSelect: true
      });

Как сделать чтобы навигация для slick slider как бы это сказать... не прикреплялась, когда я гортаю навигацю(.slick-nav) она автоматические меняет слайд в .slick. Мне нужно чтобы я мог спокойно скроллить навигацию и только когда нажму на элемент, то чтобы он менялся в .slick. Извините за такое кривое объяснение..

Comments

[kryamk]

Можно swiper попробовать, там как раз не переключается основной слайдер когда навигацию свайпишь

Answer 1

[iBird Rose]

убери slick из навигации и делай его обычным блоком со скроллом. а при клике вызывай slickGoTo на нужный слайд

Answer 2

[Froggyweb]

Отключить asNavFor: '.slick', у навигации делать смену основного слайда вручную по клику и индексу
через API slickGoTo