轮播在触摸设备（移动设备）中表现不稳定

Question

我已经放入了这个jquery轮播：（https://www.jqueryscript.net/slider/Beautiful-Horizontal-Image-Carousel-Plugin-with-jQuery-CSS3-Hover-Carousel.html#google_vignette）和定制它让它在移动设备上工作，在浏览器中工作正常，但是当您尝试在移动设备中单击它时（使用iPhone进行测试）它会跳转到轮播中的随机li a并加载错误的页面...参见这里：

有人知道这里发生了什么事吗？

谢谢，

尝试修改和注释掉 CSS 部分，但仍在寻找设备修复程序？

Answer 1

这个滑块的行为之所以如此，是因为其设计。您使用的滑块上次更新是在 10 年前，源代码中有

mouseenter

和

mousemove

事件触发轮播根据鼠标位置移动。

这样做的问题是这些事件不能很好地转换到移动设备，因为点击轮播会导致触发

mouseenter

事件。这些事件侦听器优先于点击，这使轮播首先移动，然后允许在传播堆栈中单击链接，此时会触发不同的链接。

此滑块已于 4 年前更新，当时它已转换为 vanilla JS，但仍然存在相同的问题。我认为移动用户体验并不是该开发人员真正关注的焦点，因此存在问题。

我建议尝试一下

Slick。它可以处理使轮播中的每个图像成为链接，并且具有适用于移动设备的 touchmove

 事件，这对于手机来说要好得多。我使用 Slick 进行了整个医学调查，将每个问题作为页面上的整个 div 在每个问题之间滑动，效果非常好。