Question

我在同一页面上使用了3个引导程序轮播。在第三个旋转木马中，我添加了一个文本，单独显示幻灯片图像。我的第三个轮播与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());
});

同一页面上的多个轮播

1 个答案: