Начальная карусель с миниатюрами (Multiple Carousel)
Я искал, как создать карусель 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');
});
Что работает хорошо, однако мне нужно иметь несколько каруселей на странице, и я не совсем уверен, как мне это сделать. Я устал переключать селектор идентификатора в селектор класса, чтобы я мог создать более одного. Но я не уверен, как на самом деле исправить функциональность JS, чтобы она работала, так как они, похоже, слепы.
По сути, это то, что я пытаюсь сделать:http://jsfiddle.net/xuhP9/70/ но без повторения JS для каждой независимой карусели, которую я создаю.
Заранее спасибо!