CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapcarousel
Marky Mark
Marky Mark

Reputation: 41

Twitter Bootstrap - Control multiple carousels with 1 set of carousel indicators

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!

Upvotes: 3

Views: 5412

Answers (3)

BENARD Patrick
BENARD Patrick

Reputation: 30975

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

Look this Bootply : http://bootply.com/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]"

Upvotes: 2

James Herrington
James Herrington

Reputation: 101

I've just come 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.com/twbs/bootstrap/issues/12765) seems to cause the carousels to come out of sync.

Upvotes: 3

Marky Mark
Marky Mark

Reputation: 41

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

http://jsfiddle.net/LE4f4/

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

Upvotes: 1

Related Questions