Slick Slider、ホバー上でのスライドの変更を維持する

Question

私は滑らかなスライドのためにこのコードを持っています。（次の矢印上にホバーすると）スライドが次のスライドに変わります。

私が抱えている問題は、ユーザーが次の矢印上にマウスを置いたときに、そのホバーが維持されている限り、スライドが次のスライドに連続して移動したいということです。ホバリングをすると、次のスライドに移動して停止し、次のスライドを取得するためにマウスオーバーする必要があります。

ホバーが変わらない限り、それがもはやスライドを変更しなくなったとき。

ありがとうございました！

は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); 
});