javascript - 根据 Slick Slider 中的数据属性转到幻灯片

Question

我的光滑 slider 中的一些幻灯片具有如下数据属性:data-artwork="unique-id"。我想做的是，当您将鼠标悬停在菜单项上时，它会slickGoTo基于数据属性的幻灯片。

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

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

我的问题是如何使用光滑的 slider 转到相关幻灯片？例如:如果我将鼠标悬停在带有 data-artwork="test" 的菜单项上，那么它将转到具有相同 data-artwork 值的幻灯片。

额外加分:然后我怎样才能从上次停止的地方恢复 slider ？

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