Slick滑块绑定悬停事件

Question

我正在使用slick滑块来显示图像。目前我有它，所以你可以点击导航，它会改变主图像的显示。

我正在尝试让它在悬停事件或鼠标悬停事件上设置当前选定的导航。

这是我当前用于导航和显示的代码：

$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
autoplay: true,
//trigger after the slide appears
// i is current slide index
afterChange: function (slickSlider, i) {
    //remove all active class
    $('.slider-nav .slick-slide').removeClass('slick-active');
    //set active class for current slide
    $('.slider-nav .slick-slide').eq(i).addClass('slick-active');
}
});


$('.slider-nav .slick-slide').eq(0).addClass('slick-active');

$('.slider-nav').slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    autoplay: true,
    dots: true,
    centerMode: true,
    focusOnSelect: true,
    vertical: true
});

and this is my fiddle

是否可以将mouseover事件绑定到slick？

Answer 1

应该是可能的。以前从未使用过slick，但在第一个视图中，它看起来没有实现悬停功能。我已经创建了一个快速的基本方法，您可以使用巧妙的提供的方法来解决这个问题。请看小提琴。你应该优化获取slick对象，这对你来说只是一个起点。另外，你应该在鼠标悬停时中断自动播放并重新启动它，只需尝试使用灵活的方法即可。

$('.slider-nav').on('mouseenter', '.slick-slide', function (e) {
var $currTarget = $(e.currentTarget), 
    index = $currTarget.data('slick-index'),
    slickObj = $('.slider-for').slick('getSlick');

slickObj.slickGoTo(index);

});

Working fiddle

Answer 2

使用上面的答案作为基础，我能够提出这个解决方案。这修复了当鼠标从导航幻灯片#1快速移动到#3，并在幻灯片#2上有滑块挂起时的问题。

var slideTimer;
    $('.slider-nav').on('mouseenter', '.slick-slide', function (e) {
        var $currTarget = $(e.currentTarget);
        $('.slider-nav .slick-slide').removeClass('slick-current');
        $currTarget.addClass('slick-current');

        slideTimer = setTimeout(function () {
            var index = $('.slider-nav').find('.slick-current').data('slick-index');
            var slickObj = $('.slider-for').slick('getSlick');
            slickObj.slickGoTo(index);
        }, 500);
    }).on('mouseleave', '.slick-slide', function (e) {
        clearTimeout(slideTimer);
    });