光滑滑块绑定悬停事件 [英] Slick Slider binding hover event

问题描述

我正在使用光滑的滑块显示图像.目前我拥有它，因此您可以单击导航，它会更改主图像显示.

I am using the slick slider to display images. At the moment i have it so you can click on the navigation and it changes the main image display.

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

I am trying to get it to set the currently selected navigation on a hover event or mouseover event.

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

This is my current code for the navigation and display:

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

这是我的小提琴

是否可以将mouseover事件绑定到滑行?

Is it possible to bind a mouseover event to slick?

推荐答案

应该可行.以前从未使用过平滑功能，但在第一个视图上似乎未实现悬停功能.我已经创建了一种快速的基本方法，您可以如何使用提供的实用方法解决此问题.看到小提琴. 您应该优化获取光滑对象的步骤，这只是您的起点. 另外，您应该在悬停时中断自动播放并重新启动它，只需尝试使用给定的技巧即可.

Should be possible. Never used slick before but on the first view it looks like a hover function is not implemented. I've created a fast basic approach how you could solve this with slick provided methods. See the fiddle. You should optimize getting the slick object, it's just a starting point for you. Also you should break the autoplay when hovering and restart it, just try around with the slick given methods.

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

});

工作中的小提琴

这篇关于光滑滑块绑定悬停事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！