#javascript #jquery #twitter-bootstrap
#javascript #jquery #twitter-bootstrap
Вопрос:
Я использовал 3 карусели начальной загрузки на своей странице. В третьей карусели я добавил текст для отображения отдельно с изображением слайда. Моя третья карусель точно такая —
Это Jquery, который я использовал для своих каруселей
// Set carousel options
$('#homepage-feature').carousel({
interval: 8000 // 8 seconds vs. default 5
});
// Set carousel options
$('#timetable-feature').carousel({
interval: 10000 // 4 seconds vs. default 5
});
$('#image-gallery-carousel').carousel({
interval: 5000
});
$('#carousel-text').html($('#slide-content-0').html());
// When the carousel slides, auto update the text
$('#image-gallery-carousel').on('slid.bs.carousel', function (e) {
var id = $('.item.active').data('slide-number');
//alert(id);
$('#carousel-text').html($('#slide-content-' id).html());
});
Все карусели работают, но в третьей карусели текст не работает. Если я добавлю только третью карусель, тогда она работает. Моя проблема в том, почему он не работает с двумя другими?
Ответ №1:
Когда у вас на странице 3 карусели, я бы заподозрил, что вы ориентируетесь не на ту .item-active
(первую карусель)
Попробуйте
// When the carousel slides, auto update the text
$('#image-gallery-carousel').on('slid.bs.carousel', function (e) {
var id = $(this).find('.item.active').data('slide-number');
//alert(id);
$('#carousel-text').html($('#slide-content-' id).html());
});
Комментарии:
1. У каждой карусели есть дочерний элемент с классом «.item.active». Когда вы вызываете $(«.item.active»), jQuery возвращает все элементы с классом «.item-active». Затем, когда вы вызываете var id = $(…).data(«slide-number»), переменная получает только первую (см. jsfiddle.net/petetnt/U73bJ ). В моем коде вы берете карусель с идентификатором #image-gallery-carousel (который внутри функции равен $(this) и находите элемент с «.item-active» с помощью api.jquery.com/find