我正在尝试在工作项目中使用第三方 jQuery Carousel 插件（虽然不知道它是哪个插件）。问题是，当我在同一页面上使用同一插件的多个实例时，只有一个实例会更新。我认为这个问题与我的实例的设置方式有关。我在这里构建了一个 jsFiddle 。
轮播由 .carousel 类附加，所有实例都由如下所示的方法启动：
// Enable carousel
$.each($('.carousel'), function (i) {
$(this).carousel(this.id);
});
与我的本地代码不同，在 JsFiddle 中只有一个轮播可以工作。任何帮助将不胜感激。
首先，当您的 js 运行时出现错误。如果您查看您选择的浏览器开发工具，您应该会看到
TypeError：properties.slider.swipe 不是函数
一旦注释掉，js 将正确运行，但如果您单击任何下一个和上一个按钮，则只有底部滑块将运行。这是因为它们使用相同的var properties.
我建议考虑使用您现有的代码创建一个 jQuery 小部件，这非常简单。通过这样做，您可以在一个页面上同时运行同一个小部件的多个实例。
与其修复整个插件，不如告诉你在插件初始化后，插件代码在尝试添加触摸事件时中断。
// 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'
注释掉插件代码的触摸事件，不再中断。但是，由于插件的创建方式，它一次只能处理一个轮播，因为它会覆盖最后一个定义的轮播。