Как изменить слайдер Slider Syncing?

Question

[freeman0204]

Это стандартный Slider Syncing. Мне нужно изменить его немного.



Вот эти кнопки должны прокручивать вперед и назад только миниатюры, а не вместе с большим изображением. Все остальное должно остаться как и есть. Как можно это реализовать? Даже если я нажму на миниатюру, она также должна скроллить большое изображение.

Answer 1

[0xD34F]

Отключаем встроенную синхронизацию у миниатюр, и реализуем её вручную - только по клику на слайды:

$('.slider-nav')
  .slick({
    slidesToShow: 5,
    slidesToScroll: 1,
    dots: true,
    centerMode: true,
    focusOnSelect: true,
    variableWidth: true,
  })
  .on('click', '.slick-slide', function() {
    $('.slider-for').slick('slickGoTo', this.dataset.index);
  })
  .find('.item-nav')
  .attr('data-index', i => i);

Похоже на то, что вам надо?

Comments

[freeman0204]

Да, спасибо.