title: Bootstrap Carousel with dynamic items does not slide
body: <p>I'm using the stock bootstrap carousel:</p>
  
  <pre><code>&lt;div id="main-navigation-carousel" class="carousel slide"&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="item active" data-id="0"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a&gt;&lt;/a&gt;&lt;/li&gt;
          ....
          &lt;li&gt;&lt;a&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>By clicking on an anchor tag inside the carousel a new <code>.item</code> is injected to the <code>.carousel-inner</code>. After the <code>.item</code> is injected (which works fine) the carousel should slide to that <code>.item</code>. However, nothing happens.</p>
  
  <pre><code>&lt;div id="main-navigation-carousel" class="carousel slide"&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="item active" data-id="0"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a&gt;&lt;/a&gt;&lt;/li&gt;
          ....
          &lt;li&gt;&lt;a&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="item" data-id="1"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a&gt;&lt;/a&gt;&lt;/li&gt;
          ....
          &lt;li&gt;&lt;a&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="item" data-id="2"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a&gt;&lt;/a&gt;&lt;/li&gt;
          ....
          &lt;li&gt;&lt;a&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Even if I use <code>$("#main-navigation-carousel").carousel(1);</code> in the browser console nothing happens. If I add items right in the code on the server everything works fine.</p>