多個id引導程序輪播

Question

我有多個輪播程序到縮略圖導航的一個引導程序頁面。但只有一個縮略圖導航正在工作。我用這個腳本http://www.bootply.com/79859

我知道這是因爲#myCarousel不是唯一的，但我該如何解決這個問題？多次將該腳本與另一個ID放在一起不是很花哨

$('#myCarousel').carousel({ 
interval: 4000 
}); 

// handles the carousel thumbnails 
$('[id^=carousel-selector-]').click(function(){ 
    var id_selector = $(this).attr("id"); 
    var id = id_selector.substr(id_selector.length -1); 
    id = parseInt(id); 
    $('#myCarousel').carousel(id); 
    $('[id^=carousel-selector-]').removeClass('selected'); 
    $(this).addClass('selected'); 
}); 

// when the carousel slides, auto update 
$('#myCarousel').on('slid', function (e) { 
    var id = $('.item.active').data('slide-number'); 
    id = parseInt(id); 
    $('[id^=carousel-selector-]').removeClass('selected'); 
    $('[id=carousel-selector-'+id+']').addClass('selected'); 
}); 

Answer 1

不要使用Id但使用類。

<div class="col-md-12 hidden-sm hidden-xs slider-thumbs"> 

代替

<div class="col-md-12 hidden-sm hidden-xs" id="slider-thumbs"> 

的爲例。

你可以用這個旋轉木馬嘗試：http://bootsnipp.com/snippets/featured/carousel-reviews-with-rating

您可以創建多個轉盤到一個網頁，讓他們的作品。