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