Link two Twitter Bootstrap carousels together using one control

Question

I'm just learning javascript so please bear with me here. I'm trying to initiate two carousels in bootstrap using the same control.

The way it's setup right now, href tags containing the carousel's ID is controlling each carousel. Anyone have advice on how to link both together using the same control with minimal modifications?

Here's the HTML:

<div id="asHero">
                <div id="walkThrough" class="carousel slide">
                    <!-- Carousel items -->
                    <div class="carousel-inner">
                        <div class="active item">
                            <div class="span5">
                                <h1>Discover</h1>
                                <p class="heroDesc">Explore the active side of the world around you.</p>
                            </div>
                            <div class="span6">
                                <img src="img/landing/icontest.png" />
                            </div>
                        </div>
                        <div class="item">
                            <div class="span5">
                                <h1>Track</h1>
                                <p class="heroDesc">Keep tabs on frequency and personal bests.</p>
                            </div>
                            <div class="span6">
                                <img src="img/landing/icontest2.png" />
                            </div>
                        </div>
                        <div class="item">
                            <div class="span5">
                                <h1>Conquer</h1>
                                <p class="heroDesc">Earn points and awards for everything you do in your active life.</p>
                            </div>
                            <div class="span6">
                                <img src="img/landing/icontest3.png" />
                            </div>
                        </div>
                    </div>
                    <!-- Carousel nav -->

                    <a class="carousel-control right visible-desktop" href="#walkThrough" data-slide="next">&rsaquo;</a>
                </div>
            </div> <!-- /asHero -->
            <div id="asPhone">
                <div id="walkThrough-2" class="carousel slide">
                    <!-- Carousel items -->
                    <div class="carousel-inner">
                        <div class="active item">
                            <div class="span5">
                                <h1>Discover</h1>
                                <p class="heroDesc">Explore the active side of the world around you.</p>
                            </div>
                            <div class="span6">
                                <img src="img/landing/icontest.png" />
                            </div>
                        </div>
                        <div class="item">
                            <div class="span5">
                                <h1>Track</h1>
                                <p class="heroDesc">Keep tabs on frequency and personal bests.</p>
                            </div>
                            <div class="span6">
                                <img src="img/landing/icontest2.png" />
                            </div>
                        </div>
                        <div class="item">
                            <div class="span5">
                                <h1>Conquer</h1>
                                <p class="heroDesc">Earn points and awards for everything you do in your active life.</p>
                            </div>
                            <div class="span6">
                                <img src="img/landing/icontest3.png" />
                            </div>
                        </div>
                    </div>
                    <!-- Carousel nav -->


                </div>
            </div> <!-- /asPhone -->

Here's a link to the Javascript: Twitter Bootstrap Carousel JS

Any help would be greatly appreciated!

Answer 1

You can access the carousels using their class carousel instead of their IDs. This way you can handle multiple carousels with one control.

Add an extra control button to your template

<a href="#" class="btn">Next</a>

And bind a click event to this button to control the carousels

$('.btn').on('click', function(e) {
  e.preventDefault()
  $('.carousel').carousel('next')
})

The same goes for the prev control. For more information have a look at the docs.

Answer 2

This is a partial solution, unfortunately. The reason being I can see no way to figure out from the triggered event which direction the thing is going.

$('#walkThrough').carousel({
  interval: 5000 // Slide every 5 seconds
});

$('#walkThrough-2').carousel({
  interval: false // This one does not slide on its own
});

$('#walkThrough').bind('slide', function() {
  $('#walkThrough-2').carousel('next');
});