How to make a preview in slick slider?

Question

JavaScript

It is not possible to make a slider with navigation in the form of a preview for these slides. I use Slick.
Here is the HTML:

<div class="slider-for">
      <div><img src="img/photo-example.png" alt=""></div>
      <div><img src="img/photo-example.png" alt=""></div>
      <div><img src="img/photo-example.png" alt=""></div>
</div>
<div class="slider-nav">
      <div>1</div>
      <div>2</div>
      <div>3</div>
</div>

Here is js:

$('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        fade: true,
        asNavFor: '.slider-nav'
    });
    
    $('.slider-nav').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        asNavFor: '.slider-for'
    });

The slider itself scrolls, but the navigation does not work. There are no errors in the console.

Answer 1

Add focusOnSelect: truefor.slider-nav