Bootstrap Carousel with dynamic items does not slide

Question

I'm using the stock bootstrap carousel:

<div id="main-navigation-carousel" class="carousel slide">
  <div class="carousel-inner">
    <div class="item active" data-id="0">
      <ul>
        <li><a></a></li>
        ....
        <li><a></a></li>
      </ul>
    </div>
  </div>
</div>

By clicking on an anchor tag inside the carousel a new .item is injected to the .carousel-inner. After the .item is injected (which works fine) the carousel should slide to that .item. However, nothing happens.

<div id="main-navigation-carousel" class="carousel slide">
  <div class="carousel-inner">
    <div class="item active" data-id="0">
      <ul>
        <li><a></a></li>
        ....
        <li><a></a></li>
      </ul>
    </div>
    <div class="item" data-id="1">
      <ul>
        <li><a></a></li>
        ....
        <li><a></a></li>
      </ul>
    </div>
    <div class="item" data-id="2">
      <ul>
        <li><a></a></li>
        ....
        <li><a></a></li>
      </ul>
    </div>
  </div>
</div>

Even if I use $("#main-navigation-carousel").carousel(1); in the browser console nothing happens. If I add items right in the code on the server everything works fine.

Answer 1

Removing the carousel data and then triggering it again does the job!

$("#main-navigation-carousel").carousel("pause").removeData();
$("#main-navigation-carousel").carousel(target_slide_index);

Since the carousel should not auto slide it is important to use .carousel("pause").removeData().

Answer 2

Try this :

<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators" id="car_id"></ol>
    <div class="carousel-inner" id="car_inner"></div>
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.carousel -->

//json data result = [{"id_img": 17,"img_filename": "ca0d8455-2702-4560-a444847429e36670.jpg"},{"id_img": 18,"img_filename": "eb0c6c77-fbd7-4f2c-bf22-10c874eefbf6.jpeg"},{"id_img": 19,"img_filename": "e7568c87-babb-4049-aed6-27b97866a817.png"}]
    var x = $.getJSON('../Json/GetImage', function (data) {
      $("#myCarousel").carousel("pause").removeData();
      var content_indi = "";
      var content_inner = "";
      $.each(data, function (i, obj) {
        content_indi += '<li data-target="#myCarousel" data-slide-to="' + i + '"></li>';
        content_inner += '<div class="item" style="background:url(&#39/images/' + obj.img_filename + '&#39) no-repeat center center;background-size: cover"></div>';
      });
      $('#car_id').html(content_indi);
      $('#car_inner').html(content_inner);
      $('#car_inner .item').first().addClass('active');
      $('#car_indi > li').first().addClass('active');
      $('#myCarousel').carousel();
    });