JQuery传送带多个实例在同一页

我想在工作项目中使用第三方jQuery Carousel插件（不知道它是哪个插件）。问题是，当我在同一页上使用同一插件的多个实例时，只有一个实例更新。我认为这个问题与我的实例如何设置有关。我已经在here构建了一个jsFiddle。在我的本地代码JQuery传送带多个实例在同一页

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

不同，在仅仅的jsfiddle的旋转木马的作品之一：

转盘由.carousel类连接和所有实例都通过如下所示的方法开始。任何帮助将非常感激。

来源

2013-05-08 wellers

首先有一个错误的JS运行时。如果你选择的浏览器开发者工具看，你应该看到

TypeError: properties.slider.swipe is not a function

一旦注释掉JS将正常运行，但如果你点击任何一个和上一个按钮，只有底部滑块将运行。这是因为他们使用varproperties的相同实例。

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

Coding your first jQuery ui plugin

来源

2013-05-08 15:00:33

谢谢科林。我不敢相信我错过了缺失的滑动功能:)我将试着给你的解决方案。 – wellers 2013-05-08 18:41:25

非常感谢科林。正如你所说，将现有代码作为jQuery UI Widget实现并不难。 – wellers 2013-05-08 19:32:34

不是修复整个插件，而是更容易告诉您插件初始化后插件代码在尝试添加触摸事件时会中断。

// 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'

Comment out the plug-in code's touch events，并使其不再破裂。但是，由于插件的创建方式，它一次只能处理一个轮播，因为它会覆盖最后定义的轮播。

Try a different, widely-used, and responsive JS slider that supports touch events.

来源

2013-05-08 14:55:59 Josh

感谢您的协助乔希。我不能相信我错过了缺失的刷卡功能:) – wellers 2013-05-08 18:40:03

嗨plugin.If你想请参阅

Reference Link

希望它可以帮助你，我已经创建了旋转木马，而无需使用任何第三方。

来源

2013-05-09 05:19:49