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