Question

我正在使用一个引导片段制作一个带有缩略图和字幕的旋转木马滑块。

我试图通过更改javascript在同一页面上制作另一个轮播。 [http://jsfiddle.net/djotpxgb/][2]

第一个有效，但第二个无效。

如果有人有解决方案，请告诉我。谢谢，

Answer 1

这是一个简单的问题，因为在同一页面上放置两个轮播，两者的值都不正确，两者都能正常工作。

在每次幻灯片更改时，轮播下面的文字都会改变如下：

var id = $('.item.active').data('slide-number'); $('#carousel-text').html($('#slide-content-' + id).html());

因此，它从幻灯片数据属性中获取数字，并查找适当的幻灯片内容元素。

请看看第二个转盘会发生什么：

首先，在$('#myCarousel2').on('slid.bs.carousel'...中，它尝试采用这样的幻灯片数据：

var id = $('.item.active').data('slide-number');

最终从第一个轮播获取数据;您可以轻松地更改选择器，例如：

var id = $('#myCarousel2').find('.item.active').data('slide-number');
现在，它将从这些div中获取data-slide-number：

<div class="item" data-slide-number="6"> <div class="item" data-slide-number="7"> ...
最终，它会尝试将幻灯片文本设置为#slide-content2-<id>元素下存储的内容，因此它会查找＃slide-content2-6等等
但只有slide-content2-0最多slide-content2-3个元素，因此它会尝试将undefined设置为carousel-text2 html，这将失败

总而言之，您需要更改jQuery选择器，然后确保第二个轮播幻灯片中的data-slide-number与slide-content2元素中的任何内容匹配。

Answer 2

您的缩略图链接具有重复的ID，例如，每个轮播都有一个ID为＆＃34; carousel-selector-1＆＃34;等的链接：

 <a class="thumbnail" id="carousel-selector-1"><img src="http://placehold.it/170x100&text=two"></a>