JQuery在同一页面上旋转显示多个实例

Question

我试图在工作项目中使用第三方jQuery Carousel插件(不知道它是哪个插件)。问题是，当我在同一页面上使用同一个插件的多个实例时，只有一个实例更新。我认为这个问题是我的实例是如何设置的。我在这里构造了一个jsFiddle。

carousel由.carousel类附加，所有实例都由下面所示的方法启动:

// Enable carousel
$.each($('.carousel'), function (i) {
    $(this).carousel(this.id);
});

与我的本地代码不同，在JsFiddle中，只有一个旋转木马可以工作。

Answer 1

首先有一个错误，当你的js运行。如果你查看你的浏览器开发工具，你应该看到

TypeError: properties.slider.swipe is not a function

一旦注释掉，js将正常运行，但如果你点击下一个和上一个按钮，只有底部的滑块会运行。这是因为它们使用相同的var properties实例。

我建议用你现有的代码创建一个jQuery小部件，这是相当直接的。通过这样做，您可以在一个页面上同时运行同一个小部件的多个实例。

编写第一个jQuery ui插件

Answer 2

与其修复整个插件，不如告诉您，在插件初始化之后，当插件代码试图添加触摸事件时，它会中断。

// Add touch events
properties.slider.swipe(function (event) {
    if (event.swipeDirection == 'left') {
       methods.next();
   } else if (event.swipeDirection == 'right') {
       methods.previous();
   }
});
// Throws: Uncaught TypeError: Object [object Object] has no method 'swipe' 

注释掉插件代码的触摸事件，它不再中断。但是，由于插件的创建方式，它一次只能处理一个轮播，因为它覆盖了定义的最后一个轮播。

尝试一个不同的、广泛使用的、响应灵敏的、支持触摸事件的JS滑块。

Answer 3

嗨，我已经创建了Carousel没有使用任何第三方插件。如果需要，请参考

参考链接

希望对你有帮助。