title: Setting bootstrap carousel active item selection from the main page
body: <p>I have a bootstrap carousel (slideshow) which is popping up from a page with 12 slides.
  On the page I have 12 icons which are referring to the slides on carousel.</p>
  
  <p>How can I click on the main page on item 1 and get item 1 active when popup opens?</p>
  
  <p>here is the main page sample code:</p>
  
  <pre><code>          &lt;div id="dialog"&gt; &lt;/div&gt;
            [ &lt;a href="#mythDialog" data-toggle="modal"&gt;Test Link&lt;/a&gt; ] [ &lt;a href="#mythDialog" data-toggle="modal"&gt;Test Link 2&lt;/a&gt; ] [ &lt;a href="#mythDialog" data-toggle="modal"&gt;Test Link 3&lt;/a&gt; ]
                      &lt;div id="mythDialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
                        &lt;div class="modal-header"&gt;
                          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
  
            &lt;h3 id="myModalLabel"&gt;Cool work for you&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&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;img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-03.jpg" /&gt;
                    &lt;p&gt;1111 Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.&lt;/p&gt;
                &lt;/div&gt;
                &lt;div class="item"&gt;
                    &lt;img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-01.jpg" /&gt;
                    &lt;p&gt;2222 Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.&lt;/p&gt;
                &lt;/div&gt;
                &lt;div class="item"&gt;
                    &lt;img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-02.jpg" /&gt;
                    &lt;p&gt;3333 Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.&lt;/p&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;!-- row --&gt;
  
  
  
                   &lt;div class="modal-footer"&gt;
                      &lt;button class="btn" data-dismiss="modal"&gt;Close&lt;/button&gt;
                    &lt;/div&gt;
  
                    &lt;/div&gt;&lt;!-- modal-body --&gt;
                  &lt;/div&gt; &lt;!-- mythMainDiv --&gt;
  </code></pre>
  
  <p>See it here [Link] (<a href="http://jsfiddle.net/barnamah/VCwPE/12/" rel="nofollow">http://jsfiddle.net/barnamah/VCwPE/12/</a>)</p>