滑動滑塊，保持懸停上不斷變化的幻燈片

Question

我有我的滑動滑塊的代碼，它（將鼠標懸停在下一個箭頭上）會將幻燈片更改爲下一張幻燈片。

我遇到的問題是，當用戶懸停在下一個箭頭上時，只要維持懸停，我就希望幻燈片能夠連續進入下一張幻燈片。現在懸停它只是去下一張幻燈片，然後停下來，我必須重新mouseover才能進入下一張幻燈片。

任何建議，如何我可以使它繼續改變幻燈片只要懸停保持，當它不再改變幻燈片時。

謝謝！

的JavaScript

var $showcaseSlider = $(".showcase-slider").slick({ 
infinite: true, 
slidesToShow: 6, 
slidesToScroll: 1, 
cssEase: 'linear', 
arrows: true, 
dots: false, 
pauseOnHover: true, 
pauseOnFocus: true, 
centerMode: true, 
responsive: [ 
{ 
    breakpoint: 992, 
    settings: { 
    slidesToShow: 3, 
    slidesToScroll: 1 
    } 
}, 
{ 
    breakpoint: 480, 
    settings: { 
    slidesToShow: 2, 
    slidesToScroll: 1 
    } 
} 
] 
}); 

$(".showcase-slider .slick-next").on('mouseover', function(){ 
    $showcaseSlider.slick('slickNext'); 
}); 

Answer 1

截止了搞清楚了這一點。起初，我想過使用間隔，但決定使用遞歸超時來獲得更簡潔的代碼。

var sliderTimeout; 

function changeSlideNext(){ 
    $showcaseSlider.slick('slickNext'); 
} 
function recursiveSlideChangeNext(){ 
    changeSlideNext(); 
    sliderTimeout = setTimeout(function(){ 
    recursiveSlideChangeNext(); 
    },1000); 
} 
function killSlideChange(timer){ 
window.clearTimeout(timer); 
} 

$(".showcase-slider .slick-next").on('mouseover', function(){ 
    recursiveSlideChangeNext(); 
}); 

$(".showcase-slider .slick-next").on('mouseout', function(){ 
    killSlideChange(sliderTimeout); 
});