How to change the behavior of Slick Slider?

Question

JavaScript

<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
      });

How do I make the nav for the slick slider how shall I put it... not sticky, when I press the nav(.slick-nav) it automatically changes the slide to .slick. I need to be able to easily scroll the navigation and only when I click on the element, that it changes in .slick. Sorry for such a lame explanation..

Answer 1

remove slick from navigation and make it a normal scroll block. and when clicked, call slickGoTo on the desired slide