带缩略图的引导轮播（多个轮播）

Question

我一直在寻找如何创建带有缩略图的Bootstrap传送带的方法，并且遇到了这个问题： http : //jsfiddle.net/xuhP9/67/

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

$('[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');
});

$('#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');
});

效果很好，但是，我需要在一个页面中放置多个轮播，而且我不确定如何实现此功能。 我厌倦了将id选择器切换为类选择器，因此可以创建多个选择器。 但是我不确定如何实际修复JS功能以使其正常工作，因为它们似乎被视而不见。

基本上，这就是我要完成的工作： http : //jsfiddle.net/xuhP9/70/，但没有为我创建的每个独立轮播重复JS。

提前致谢！

Answer 1

此方法要求您的轮播具有ID = myCarousel1，myCarousel2等。

以及您选择的相应轮播的选择器是轮播选择器1-1，轮播选择器1-2 ...和轮播选择器2-1，轮播选择器2-2

更新的小提琴： http : //jsfiddle.net/xuhP9/77/

$('.customCarousel').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);
     var parent = $(this).closest('ul').data('carousel');
     $('#myCarousel' + parent).carousel(id);
     $('[id^=carousel-selector' + parent +'-]').removeClass('selected');
     $(this).addClass('selected');
 });

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