javascript - 同一页面上多个轮播

Question

我在同一页面中使用了 3 个 Bootstrap 轮播。在第三个轮播中，我添加了一个文本以与幻灯片图像一起单独显示。我的第三个轮播就像 this -

这是我用于轮播的 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());
});

所有轮播都正常工作，但在第三个轮播中文本不起作用。如果我只添加第三个轮播，那么它就可以工作。我的问题是为什么它不能与其他两个一起使用？

Answer 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());
});