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>