Bootstrap旋转木马带字幕和缩略图

Question

我使用引导片段来制作具有缩略图和字幕的旋转木马滑块。

也就是说从http://bootsnipp.com/snippets/featured/carousel-extended-320-compatible

我试图让在同一页上另一转盘与改变的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');

• 现在，将采取data-slide-number从这些div：

  <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元素中的任何内容。

Here's an example how to solve this

Answer 2

你的缩略图的链接有重复的ID，作为一个例子，每个转盘有“旋转木马选择-1”等：一个ID的链接

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