Как сделать свою навигацию для Slick Slider?

Question

[virek97]

Можно ли сделать для slick slider свою навигацию? Не изменить вид существующей, а именно сделать свою?
Есть 6 мини блоков с текстом и 6 слайдов. Нужно соответственно сделать, чтобы при клике на определенный блок открывался соответствующий слайдер. Возможна ли в принципе такая реализация?

Answer 1

[0xD34F]

Получаете элементы, которые будут выступать в роли кнопок для перехода к слайдам; вешаете на них обработчик клика, в котором получаете индекс кликнутого элемента и переключаете слайдер на соответствующий слайд:

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

Чтобы выделить кнопку, соответствующую текущему слайду, добавляете слайдеру обработчик событий init и beforeChange, в котором убираете класс, отвечающий за стилизизацию у всех кнопок (так проще, чем искать ту, которой он назначен в данный момент), добавляете его той, чей индекс совпадает с индексом текущего/будущего (в зависимости от события) активного слайда:

$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/

Comments

[virek97]

Извиняюсь за наглость) Возможно, Вы сможете мне еще подсказать, как в этом случае подсвечивать активный блок? Я понимаю, что нужно назначить что-то типа класа "active" для активного блока-ссылки и задать для этого класа стили, но к сожалению не понимаю как реализовать на slick это назначение класа.

[0xD34F]

viktor_rekhnyuk, обновил ответ.

[virek97]

0xD34F, большое спасибо :-)

[Владимир Куликов]

Спасибо!

Answer 2

[WebDev]

Возможна. При клике на элемент переключайте слайдер на нужный слайд. В документации это есть. Например метод slickGoTo.