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

Question

我光滑的滑块中的一些幻灯片具有如下数据属性：data-artwork="unique-id"。我想要做的是，当您 hover 在菜单项上时，它会 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'
});

我的问题是我怎样才能使用光滑的滑块转到相关幻灯片？例如：如果我将鼠标悬停在带有 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');
    });

但这是不可预测的。如果您将鼠标悬停在菜单中的速度过快，它会表现得很糟糕并且会让人感到困惑。

编辑：

在悬停（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');
    });

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

Go to slide based on data attribute in Slick Slider

javascript

jquery

slider

slideshow