Note that there are some explanatory texts on larger screens.

plurals
  1. POBootstrap - Target different carousels simultaneously from one controller?
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload