При клике по элементам списка перелистывать slick slider?

Question

[Pit]

Здравствуйте! Нужна помощь, есть слайдер slick и есть обычный список ul, нужно сделать так чтобы по клику элементам списка перелистывал слайдер, и так-же если сам слайдер перелистался то и у списка изменился active автоматически.

Comments

[vetuse]

У slick есть опция asNavFor, на сайте есть пример.

[Pit]

vetuse, он мне не подходит, я не хочу чтобы список был тоже слайдером, здесь надо написать просто js код который будет работать по index списку

[vetuse]

Pit, есть метод slickGoTo, пробовали с ним?

[Pit]

vetuse, не шарю как сделать, смысл понимаю а вот реализовать не смогу

Answer 1

[Beliyadm]

$('.slider_blocks').on('click', 'li', function(){
		var lindex = $(this).index();
		$( ".slider" ).slick('slickGoTo', parseInt(lindex)); // меняем слад на нужный индекс
		$('.slider_blocks li').removeClass('active'); // change class
		$(this).addClass('active');
});

где slider_blocks - класс UL в котором находятся управляющие слайдером LI

И обратное управление списком при смене слайда

$('.slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
		var slideIndex = $(this).index();
		$('.slider_blocks li').removeClass('active');
		$('.slider_blocks li').eq(currentSlide).addClass('active')
	});

Comments

[Pit]

Спасибо большое помогло

[Beliyadm]

Всегда рад.
Только учитывайте, что в этом примере работа идет по индексу элемента, то есть количество слайдов должно совпадать с количеством управляющих элементов в вашем UL LI
У меня была подобная задача, потому пример кода и сохранил

[Pit]

Пётр, да я в jquery шарю норм, только вот со слайдером slick давно не работал вот и позабыл много чего. Смотришь на пример все элементарно. Но все равно спасибо выручили.