How would you go about controlling 2 Bootstrap carousels on one page, with only 1 set of carousel indicators? At the moment, I have both carousels set-up using the same '.carousel' class. When the user clicks the next or previous controls, the slide events on both carousels execute simulaneously.

I'm attempting to bind the slide event to the carousel indicators, which are nested in the main carousel. The desired result would be to bind the slide event to the ID of the second carousel, so that both next/previous slide events are exactly the same. Here's what I have so far:

$(document).ready(function(){
  $('.carousel-indicator li').click('slide', function() {
    $('#project-carousel-phone').bind().carousel();
  });
});

I suck at Javascript, so any direction here would be greatly appreciated. Thanks!

How would you go about controlling 2 Bootstrap carousels on one page, with only 1 set of carousel indicators? At the moment, I have both carousels set-up using the same '.carousel' class. When the user clicks the next or previous controls, the slide events on both carousels execute simulaneously.

I'm attempting to bind the slide event to the carousel indicators, which are nested in the main carousel. The desired result would be to bind the slide event to the ID of the second carousel, so that both next/previous slide events are exactly the same. Here's what I have so far:

$(document).ready(function(){
  $('.carousel-indicator li').click('slide', function() {
    $('#project-carousel-phone').bind().carousel();
  });
});

I suck at Javascript, so any direction here would be greatly appreciated. Thanks!

• javascript
• jquery
• twitter-bootstrap
• carousel

Share Improve this question Follow asked Feb 12, 2014 at 5:03 Marky MarkMarky Mark 4111 silver badge33 bronze badges 1

• See this answer: stackoverflow./questions/12902592/… – cssyphus Commented Feb 27, 2016 at 22:03

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

I've just e across this question whilst looking for an answer. My solution was:

var carousel1 = $('#carousel1').carousel();
var carousel2= $('#carousel2').carousel();
carousel1.on('slide.bs.carousel', function(event) {
    var to = $(event.relatedTarget).index();
    carousel2.carousel(to);
});

This should handle changes via next/previous buttons, carousel indicators and interval changes.

The previous solution that I found (mentioned by 'Marky Mark', referenced here https://github./twbs/bootstrap/issues/12765) seems to cause the carousels to e out of sync.

Don't worry about this ^^, I hope this solution can interest you.

Look this Bootply : http://bootply./113007

In this bootply, there are two caroussel : [id] 'myCarousel' and 'myCarousel2'

And exactly this part :

  <!-- Carousel nav -->
  <a class="carousel-control left" href="[id^=myCarousel]" data-slide="prev">‹</a>
  <a class="carousel-control right" href="[id^=myCarousel]" data-slide="next">›</a>

As you can see, in order to link the nav to the two carousel :

href="[id^=myCarousel]"

A solution has been reached. See example below for how to implement.

http://jsfiddle/LE4f4/

$('.carousel-indicators li').on('click', function() { $('.carousel').carousel(parseInt(this.getAttribute('data-to')));
});