Scrolling slick slider when clicking on list items?

Question

JavaScript

Hello! I need help, there is a slick slider and there is a regular ul list, you need to make it so that by clicking on the list elements the slider scrolls, and also if the slider itself is scrolled, then the active of the list changes automatically.

Answer 1

$('.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');
});

where slider_blocks is the UL class that contains the slider controls LI
AND the reverse control of the list when changing the slide

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