根据Slick Slider

Question

我的光滑滑块中的某些幻灯片具有以下数据属性：data-artwork="unique-id"。我要做的是当你在菜单项hover上slickGoTo根据数据属性<ul class="project-feed"> <li data-artwork="unique-id"> <a href="#">Example</a> </li> </ul> 幻灯片时。

菜单项具有匹配的数据属性，如下所示：

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

我正在使用Javascript将这些数据属性添加到变量中，如下所示：

data-artwork="test"

我的问题是如何使用光滑滑块转到相对幻灯片？例如：如果我将鼠标悬停在包含data-artwork的菜单项上，则会转到具有相同CheckBox值的幻灯片。

额外信用：如何从停止的位置恢复滑块？

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

但这是不可预测的。如果你过快地浏览菜单，它会表现得很糟糕并且会感到困惑。

修改

在悬停（in）上添加延迟有助于平滑功能：

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