Bootstrap multiple carousels on one page

carousel, css, html, javascript, twitter-bootstrap

Solution

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.

Problem

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.

Original source