Bootstrap Karussell mit Thumbnails (Multiple Carousel)

Ich habe nachgeschlagen, wie ein Bootstrap-Karussell mit Miniaturansichten erstellt werden kann. Dabei bin ich auf Folgendes gestoßen: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');
});

Was gut funktioniert, ich muss jedoch mehrere Karussells auf einer Seite haben, und ich bin nicht ganz sicher, wie ich das erreichen kann. Ich war müde, den ID-Selektor in einen Klassen-Selektor zu verwandeln, damit ich mehr als einen erstellen kann. Ich bin mir jedoch nicht sicher, wie ich die JS-Funktionalität tatsächlich reparieren soll, damit sie funktioniert, da sie zusammengeblendet zu sein scheinen.

rundsätzlich versuche ich Folgendes zu erreichen:http: //jsfiddle.net/xuhP9/70 aber ohne das JS für jedes unabhängige Karussell zu wiederholen, das ich erstelle.

Danke im Voraus

Antworten auf die Frage(1)

Ihre Antwort auf die Frage