javascript Slick Slider 绑定悬停事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32906434/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Slick Slider binding hover event
提问by hdzillar
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
});
Is it possible to bind a mouseover event to slick?
是否可以将鼠标悬停事件绑定到光滑？
回答by hyde
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.
应该是可以的。以前从未使用过 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);
});
回答by Sara
Using the above answer as a base, I was able to come up with this solution. This fixes the issue when quickly mousing over from navslide #1 to #3, and having the slider-for hangup on slide #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);
});
