JQuery Carousel在同一页面上有多个实例

Question

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

轮播由.carousel类附加，所有实例均由以下方法启动：

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

与我的本地代码不同，在JsFiddle中只有一个轮播工作。非常感谢任何帮助。

Answer 1

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

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

首先，当你的js运行时会出错。如果您查看浏览器开发工具，您应该看到

  

TypeError：properties.slider.swipe不是函数

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

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

Coding your first jQuery ui plugin

Answer 3

您好我在不使用任何第三方插件的情况下创建了Carousel。如果您需要，请参阅

Reference Link

希望它可以帮助你。