How to make your own navigation for Slick Slider?

Question

JavaScript

Is it possible to make custom navigation for slick slider? Do not change the look of the existing one, namely, make your own?
There are 6 mini blocks with text and 6 slides. It is necessary to make accordingly, so that when you click on a certain block, the corresponding slider opens. Is such an implementation possible in principle?

Answer 1

Get elements that will act as buttons for moving to slides; hang a click handler on them, in which you get the index of the clicked element and switch the slider to the corresponding slide:

const $buttons = $('здесь селектор ваших кнопок').click(function() {
  $slick.slick('slickGoTo', $buttons.index(this));
});

To highlight the button corresponding to the current slide, add an init and beforeChange event handler to the slider, in which you remove the class responsible for styling all buttons (it’s easier than looking for the one to which it is currently assigned), add it to the one whose index matches with the index of the current/future (depending on the event) active slide:

$slick.on('init beforeChange', function(e, slick, currSlide, nextSlide) {
  $buttons
    .removeClass('active')
    .eq(e.type === 'init' ? slick.currentSlide : nextSlide)
    .addClass('active');
});

https://jsfiddle.net/t1647ync/

Answer 2

Possible. When you click on an element, switch the slider to the desired slide. It 's in the documentation . For example, the slickGoTo method.