Bootstrap with multiple carousels on one page

Question

I am after three carousels on one page, which are controlled by one control. Therefore, when you click next or previous, all carousels move immediately.

This is an example with three carousels, but everything is separate.

I am stuck.

Answer 1

Here is my example:

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

A key piece of code for managing all carousels is the following:

<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 identifier, the button fires events on all carousels on the page.