JQuery在同一页面上轮播多个实例

Question

我正在尝试在一个项目中使用第三方jQuery Carousel插件(虽然不知道是哪个插件)。问题是，当我在同一页面上使用同一插件的多个实例时，只有一个实例更新。我认为这个问题与我的实例的设置方式有关。我已经在here构建了一个jsFiddle。

轮播由.carousel类附加，所有实例由如下所示的方法初始化：

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

与我的本地代码不同，在JsFiddle中，只有一个carousel可以工作。任何帮助都将不胜感激。

Answer 1

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

TypeError: properties.slider.swipe不是函数

注释掉后，js将正确运行，但如果您单击任何下一步和上一步按钮，则只会运行底部的滑块。这是因为它们使用相同的var properties实例。

我建议您考虑使用现有代码创建一个jQuery小部件，这样做非常简单。通过这样做，您可以让同一个小部件的多个实例一起在一个页面上运行。

Coding your first jQuery ui plugin

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' 

Comment out the plug-in code's touch events，并且它不再中断。但是，由于插件的创建方式，它一次只能处理一个转盘，因为它会覆盖上一个定义的转盘。

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

Answer 3

嗨，我已经创建了旋转木马，没有使用任何第三方plugin.If，请参阅

Reference Link

希望能对你有所帮助。