How to control slick slider with links?

Question

JavaScript

There is a list of links:

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

And a slick slider with three slides, it is necessary that pagination be through these links: click on the second link - the 2nd slide appears, on the third - the third, and so on. Tried like this:

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

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

Here is the code, but here it is clumsily displayed https://jsfiddle.net/rinatoptimus/fL0rx6jn/1/

Answer 1

codepen.io/anon/pen/bwOoqy
For this, there is asNavFor in the slick

Answer 2

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

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