光滑滑块绑定悬停事件

Slick Slider binding hover event

本文关键字：事件 悬停 绑定      更新时间：2023-09-26

我使用滑块显示图像。此刻我有它，所以你可以点击导航，它改变了主图像显示。

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

这是我当前的导航和显示代码:

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

这是我的小提琴

是否可以将鼠标悬停事件绑定到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);
});
工作小提琴

以上面的答案为基础，我想出了这个解决方案。这解决了当快速鼠标从导航幻灯片#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);
    });
相关文章：