问题描述
我正在使用光滑的滑块显示图像.目前我拥有它,因此您可以单击导航,它会更改主图像显示.
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);
});
这篇关于光滑滑块绑定悬停事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!