Как можно подключить функции пагинации слайдера Slick на свои элементы?

Question

[Константин]

Добрый вечер!

Всегда в проектах использовал слайдер Owl, но тут пришлось в-первые столкнуться на действующем проекте со Slick. Как можно функции пагинации "прикрутить" на свои иконки? Т.е. есть уже сверстанные элементы с иконками и подписями и при клике на которые слайдер должен пролистываться до необходимой позиции.
С OWL я делал это примерно так:

$(document).ready(function () {
  var owl = $('#slider')

  owl.owlCarousel({
    items: 1, // 10 items above 1000px browser width
    itemsDesktop: [1000, 1], // 5 items between 1000px and 901px
    itemsDesktopSmall: [900, 1], // betweem 900px and 601px
    itemsTablet: [600, 1], // 2 items between 600 and 0
    itemsMobile: [375, 1], // itemsMobile disabled - inherit from itemsTablet option
    navigation: false,
    slideSpeed: 800,
    paginationSpeed : 800,
    rewindSpeed : 1000,
    autoPlay: false,
  })
  $('#all').click(function(){
    owl.trigger('owl.goTo', [0, 800, true])
  });
  $('#jazz').click(function(){
    owl.trigger('owl.goTo', [1, 800, true])

   $('#rock').click(function(){
     owl.trigger('owl.goTo', [2, 800, true])
   });
   $('#pop').click(function(){
     owl.trigger('owl.goTo', [3, 800, true])
   });
   $('#dance').click(function(){
     owl.trigger('owl.goTo', [4, 800, true])

  });

})
})

Как подобное можно сделать на Slick ?

Comments

[iBird Rose]

ты хочешь реализовать свои dots?

[Константин]

типо того. Но кастомизицаю встроенных dots в слайдер я видел. А можно ли не кастомизировать из коробки, а саму функцию только взять и прикрутить к своим дивам ?

[iBird Rose]

Константин: ответ написал. альтернатива твоему "owl.goTo" - "slickGoTo"

[iBird Rose]

Константин: и он тоже принимает почти такие же аргументы Arguments: int : slide number, boolean: dont animate - kenwheeler.github.io/slick

Answer 1

[iBird Rose]

к примеру так:

$('.dots li').on('click', function() {
		var slideIndex = $(this).index();
		$('.slider').slick('slickGoTo',  slideIndex);
	});

Comments

[Константин]

Огонь!спасибо!