Перейти к слайду на основе атрибута данных в Slick Slider

Question

Некоторые слайды в моем слайдере имеют атрибуты данных, такие как: data-artwork="unique-id". То, что я пытаюсь сделать, - это когда hover над пунктом меню будет slickGoTo слайд, основанный на атрибуте data.

пункты меню продублированы соответствие данных-атрибутов, как это:

<ul class="project-feed"> 
    <li data-artwork="unique-id"> 
     <a href="#">Example</a> 
    </li> 
</ul> 

, и я использую Javascript для добавления этих данных-атрибутов переменной, например, так:

$('.project-feed li').hover(function() { 
    var artworkId = $(this).data('artwork'); // 'unique-id' 
}); 

Мой вопрос как я могу использовать слайдер слайдера, чтобы перейти к относительному слайду? Пример: если я нарисую элемент меню с data-artwork="test", он перейдет на слайд с тем же значением data-artwork.

Дополнительный кредит: Как я могу возобновить слайдер с того места, где он остановился?

Answer 1

Это работает:

var resumeIndex; 
    $('.project-feed li').hover(function() { 
     resumeIndex = $slider.slick("getSlick").currentSlide; 
     var artworkId = $(this).data('artwork'); 
     var artIndex = $slider.find('[data-artwork="' + artworkId + '"]').data('slick-index'); 
     $slider.slick('slickPause').slick('slickGoTo', artIndex); 
     console.log(resumeIndex); 
    }, function() { 
     $slider.slick('slickGoTo', 0).slick('slickPlay'); 
    }); 

Но это непредсказуемо. Если вы слишком быстро нависаете над меню, это ведет себя плохо и путается.

Редактировать:

Добавление задержки на зависании (в) помогло сгладить функциональность:

var randomSlide; 
    var timeout; 

    $('.project-feed li').hover(function() { 
     var artworkId = $(this).data('artwork'); 
     var artIndex = $slider.find('[data-artwork="' + artworkId + '"]').data('slick-index'); 
     var totalSlides = $('.slick-slide:not(.slick-cloned)').length; 
     randomSlide = Math.floor((Math.random() * totalSlides) + 1); 

     timeout = setTimeout(function() { 
      $slider.slick('slickPause').slick('slickGoTo', artIndex); 
     }, 500); 

    }, function() { 
     clearTimeout(timeout); 
     $slider.slick('slickGoTo', randomSlide).slick('slickPlay'); 
    });