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

光滑滑块，在悬停时保持更换幻灯片

1 个答案: