滑動滑塊綁定懸停事件

我正在使用滑動滑塊來顯示圖像。目前我擁有它，因此您可以單擊導航並更改主圖像顯示。滑動滑塊綁定懸停事件

我想讓它設置懸停事件或鼠標懸停事件當前選定的導航。

這是我目前的導航和顯示代碼：

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

是否可以綁定一個鼠標懸停事件華而不實？

來源

2015-10-02 hdzillar

應該可以的。之前從未使用過光滑但在第一個視圖中，它看起來像懸停功能沒有實現。我已經創建了一個快速的基本方法，你可以用光滑的方法解決這個問題。看小提琴。你應該優化獲得光滑的對象，這只是你的一個起點。當你懸停並重新啓動它時，你也應該打破自動播放，只是嘗試使用光滑的給定方法。

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

來源

2015-10-02 12:21:37 hyde

謝謝海德。這工作完美 – hdzillar

只是想知道爲什麼你使用鼠標懸停mouseenter。我在移動鼠標上下移動時有時候會出現延遲 – hdzillar

我認爲當自動播放觸發時會發生延遲，這就是爲什麼我說你應該更好地實現自動播放的中斷並重新啓動它，所以這可能不會發生 – hyde

滑動滑塊綁定懸停事件

回答

相關問題