javascript - multiple carousels on same page -
javascript - multiple carousels on same page -
i have used 3 bootstrap carousels in same page. in 3rd carousel have added text display lone slide image. 3rd carousel this -
this jquery have used carousels
// 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 carousel slides, auto update 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()); });
all carousels working in 3rd carousel text not working. if add together 3rd carousel working. problem why not working other two?
when have 3 carousels on page, i'd suspect targeting wrong .item-active
(the first carousels one)
try
// when carousel slides, auto update 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()); });
javascript jquery twitter-bootstrap
Comments
Post a Comment