在无限平滑修改的猫头鹰滑块上添加暂停

Posted 2021-04-12

我要做的是构建一个无限平滑的图像滑块。我从https://codepen.io/mdrezwanferdous/pen/wpNZxN的代码开始，因为我希望有相同的效果。但我很难弄清楚如何添加悬停效果。当鼠标悬停在单张图片上时，滑块应立即停止。当鼠标离开时，滑块应该继续循环。

到目前为止我试图做的事情：

$('.owl-carousel .owl-item').on('mouseenter',function(e){
  $('.owl-carousel').trigger('mouseover.owl.autoplay');
  $('.owl-carousel').trigger('stop.owl.autoplay');
  $('.owl-carousel').trigger('stop.autoplay.owl');
  $('.owl-carousel').trigger('autoplay.stop.owl');
})

但这四条线都没有奏效。

有没有一种简单的方法来解决这个问题？猫头鹰旋转木马甚至可以吗？

如果不是，是否有任何可以执行此操作的免费滑块？我尝试使用Slick滑块，但效果不佳（问题是因为悬停幻灯片没有立即停止。而是等待幻灯片转换完成）​​。

任何帮助将受到高度赞赏。

答案

您尝试遵循的示例似乎过于复杂。我建议在这里使用Slick.js。

图书馆文档应该足以让你入门：https://kenwheeler.github.io/slick/

专注于那两个设置（autoplay，pauseOnHover），我相信你正在寻找（参见自动播放部分）：

$('.autoplay').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
  pauseOnHover: true
});

如果您在解决问题时遇到麻烦，请告诉我