title: Bootstrap - Target different carousels simultaneously from one controller?
body: <p>I am using Twitter Bootstrap to set up a website with <strong>several carousels</strong> in it. The idea is that I want to have a main carousel with indicators and controls, the secondary carousels without them, and <strong>control all carousels simultaneously from a single carousel controls</strong>, i.e. the main carousel. </p>
  
  <p>Edit: well, actually not <em>all of them</em>, but <em>most</em> of them. I am looking specifically at targetting a group of classes/ids with a single carousel controls, but leave <em>some others</em> to still work autonomously...</p>
  
  <p>Sample code:</p>
  
  <pre><code>&lt;!-- One Carousel to rule them all --&gt;
  &lt;div id="myCarousel" class="carousel slide"&gt;
    &lt;ol class="carousel-indicators"&gt;
      &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
    &lt;/ol&gt;
    &lt;!-- Carousel items --&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="active item"&gt;…&lt;/div&gt;
      &lt;div class="item"&gt;…&lt;/div&gt;
      &lt;div class="item"&gt;…&lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- Carousel nav --&gt;
    &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
    &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;!-- The ruled carousel --&gt;
  &lt;div id="myCarousel2" class="carousel slide"&gt;
    &lt;!-- Carousel items --&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="active item"&gt;…&lt;/div&gt;
      &lt;div class="item"&gt;…&lt;/div&gt;
      &lt;div class="item"&gt;…&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Problem is, carousels with the same ids don't work, and I am not sure how to target different ids from a single href in the carousel nav. I have tried:</p>
  
  <pre><code>&lt;a class="carousel-control left" href="#myCarousel #myCarousel2" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
  </code></pre>
  
  <p>or</p>
  
  <pre><code>&lt;a class="carousel-control left" href="#myCarousel, #myCarousel2" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
  </code></pre>
  
  <p>or </p>
  
  <pre><code>&lt;a class="carousel-control left" href="#myCarousel" href="#myCarousel2" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
  </code></pre>
  
  <p>with no luck...</p>
  
  <p>Thanks!</p>