두 개 이상의 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를 사용하지 않고 클래스를 사용하십시오. 대신 exemple에 대한

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

의

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

.

이 회전 목마와 함께 시도 할 수 있습니다 : http://bootsnipp.com/snippets/featured/carousel-reviews-with-rating

당신은 한 페이지에 여러 회전 목마를 만들 수 있으며 작동합니다.