同一頁上的多個傳送帶

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