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

【问题标题】：Adding pause on infinite smooth modified Owl Slider在无限平滑修改的猫头鹰滑块上添加暂停
【发布时间】：2019-04-28 12:47:26
【问题描述】：

我要做的是构建一个无限平滑的图像滑块。我从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');
})

但是这四行都不起作用。

有没有简单的方法来解决这个问题？ Owl Carousel 甚至可以做到这一点吗？

如果没有，是否有任何免费的滑块可以做到这一点？我尝试使用 Slick 滑块，但效果不佳（问题在于悬停幻灯片并没有立即停止。而是等待幻灯片转换完成）。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery slider owl-carousel

【解决方案1】：

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

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

关注这 2 个设置（autoplay、pauseOnHover），我相信这就是您正在寻找的（参见自动播放部分）：

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

如果您在理解您的问题时遇到问题，请告诉我

【讨论】：