Блог

Я использовал 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());
});
 

Все карусели работают, но в третьей карусели текст не работает. Если я добавлю только третью карусель, тогда она работает. Моя проблема в том, почему он не работает с двумя другими?

Когда у вас на странице 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());
});