Как сделать превью в slick slider?

Question

[Darren_Clyde]

Не получается сделать слайдер с навигацией в виде превью к этим слайдам. Использую Slick.
Вот 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>

Вот js:

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

Сам слайдер листается, а навигация не работает. Ошибок в консоли нет.

Answer 1

[Андрей Б.]

Добавьте focusOnSelect: true для .slider-nav