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

【问题标题】：Go to slide based on data attribute in Slick Slider根据 Slick Slider 中的数据属性转到幻灯片
【发布时间】：2015-05-21 15:07:59
【问题描述】：

我的光滑滑块中的一些幻灯片具有如下数据属性：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 值的幻灯片。

额外的功劳：我怎样才能从停止的地方恢复滑块？

【问题讨论】：

标签： javascript jquery slider slideshow

【解决方案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');
    });

【讨论】：