Bootstrap multiple carousels on one page

Question

I'm after 3 carousels on the one page that are controlled by the one control. So when clicking next or previous all carousels move at once.

This an example with 3 carousels but there all seperate.

I'm stuck.

Answer 1

Here is my example:

http://jsfiddle.net/D2RLR/1247/

The key part of the code to control all carousels is this:

<button class="btn btn-primary" data-slide="prev" href=".carousel">Prev All</button>
<button class="btn btn-primary" data-slide="next" href=".carousel">Next All</button>

By specifying the .carousel class rather than a specific ID, the button triggers events on all carousels on the page.