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

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -