title: Bootstrap Carousel indicators not cycling in correct order
body: <p>I was trying to make the twitter bootstrap carousel work, now everything is working fine except for the indicators that are not working properly, when i press the next-arrow the indicators jumps directly to the third instead of going on the second, and when i go back by click prev-arrow the image completely disappear, where is the issue? what am i doing wrong?</p>
  
  <p>In my case i got a div z-index positioned on top of the slider for achieving the effect of a block not moving on it. see it by yourself for better understanding:</p>
  
  <p>Here is my example: <a href="http://jsfiddle.net/jRa5r/2/" rel="nofollow">http://jsfiddle.net/jRa5r/2/</a></p>
  
  <p>Here is the HTML, follow up on jsfiddle for the full example with the rest of the code.</p>
  
  <pre><code>&lt;div id="myCarousel" class="carousel slide"&gt; &lt;!-- slider --&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;div class="carousel-inner"&gt;
                  &lt;div class="caption-block"&gt;&lt;/div&gt;
                  &lt;div class="active item"&gt; &lt;!-- item 1 --&gt;
                      &lt;img src="img/slider1.jpg" alt=""&gt;
                      &lt;div class="carousel-caption"&gt;
                          &lt;h4&gt;A team with long experience in Domestic and International relationships with key sector decision-makers.&lt;/h4&gt;
                      &lt;/div&gt;
                  &lt;/div&gt; &lt;!-- end item --&gt;
                  &lt;div class="item"&gt; &lt;!-- item 2 --&gt;
                      &lt;img src="img/slider1.jpg" alt=""&gt;
                      &lt;div class="carousel-caption"&gt;
                          &lt;h4&gt;Title&lt;/h4&gt;
                          &lt;p&gt;Mollitia officia reiciendis excepturi temporibus quibusdam.&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt; &lt;!-- end item --&gt;
                  &lt;div class="item"&gt; &lt;!-- item 3 --&gt;
                      &lt;img src="img/slider1.jpg" alt=""&gt;
                      &lt;div class="carousel-caption"&gt;
                          &lt;h4&gt;Title&lt;/h4&gt;
                          &lt;p&gt;Quibusdam blanditiis.&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt; &lt;!-- end item --&gt;
              &lt;/div&gt; &lt;!-- end carousel inner --&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;!-- end slider --&gt;
  </code></pre>