Как управлять slick слайдером при помощи ссылок?

Question

[rinatoptimus]

Имеется список ссылок:

<ul>
    <li><a href="">One</a>
    <li><a href="">Two</a>
    <li><a href="">Three</a>
</ul>

И слик слайдер с тремя слайдами, надо, чтоб пагинация была посредством этих ссылок: кликнул на вторую ссылку - появился 2 слайд, на третью - третий и тд. Пробовал так:

...
<li><a class="test"  href="">Two</a></li>

$('.test').click(function(e) {
    $('.js-event-slider').slick('next');
});

Вот код, но тут коряво отобр-ся https://jsfiddle.net/rinatoptimus/fL0rx6jn/1/

Answer 1

[Андрей Б.]

codepen.io/anon/pen/bwOoqy
Для этого в слике есть asNavFor

Comments

[rinatoptimus]

Почему-то у меня и сами элементы списка слайдятся. Код тот же.

[rinatoptimus]

rinatoptimus: вот так я сделал:
$(document).ready(function(){
// test begin
$('.js-event-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
dots: false,
autoplay: false,
adaptiveHeight: true,
asNavFor: '.js-slider-control',
});
$('.js-slider-control').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: false,
centerMode: true,
focusOnSelect: true,
asNavFor: '.js-event-slider'
});
// test end
});

[rinatoptimus]

rinatoptimus: Заработало, уменьшил slidesToShow

Answer 2

[iBird Rose]

Если всегда 3 и не меняются, используй slickGoTo

$('js-event-slider').slick('slickGoTo', 0);
$('js-event-slider').slick('slickGoTo', 1);
$('js-event-slider').slick('slickGoTo', 2);