Bootstrap Carousel not working after adding items dynamically with jQuery

Answer 1

you need to add you images to the same DOM element as you other images.

instead of $('#myContent').append(imgElement); it should be

$('#theCarousel3 .carousel-inner').eq(0).append(imageElement);

You may be able to get rid of the eq(0) part, but I'm not sure if that will work since class selector is multiple.

the other option is to add the myContent id to your carousel-inner element

you also arent creating valid html the way you are trying to create the carousel

try this:

$(function() {
  var imgElement,
    pictures = [
      'https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png',
      'https://lh3.googleusercontent.com/Rz-Ob1uRO2Xch40qHYgxpZitc3vZzxjeeSHVaNazn4dUny-AqGK0hLXUxhTpg4qgATP6VdlvZPYv_o0=s559-no',
      'http://blog.suite-logique.fr/wp-content/uploads/2014/01/G7N0lnxM.jpeg',
      'http://inspiratron.org/wp-content/uploads/2014/07/google-hummingbird.jpg'
    ]
    wrapper = $('#myContent'),
    carousel = $('<div/>', {
      id: "theCarousel3",
      "class": "carousel slide multi-item-carousel",
      append: '<div class="carousel-inner"></div><a class="left carousel-control" href="#theCarousel3" data-slide="prev"></a><a class="right carousel-control" href="#theCarousel3" data-slide="next"></a>'
    }),
    carouselInner = carousel.find('.carousel-inner').eq(0);

  wrapper.append(carousel);
  carousel.carousel();
  for (var i = 0; i < pictures.length; i++) {
    imgElement = $('<div/>', {
      "class": "item" + (i ? '' : ' active'),
      append: $('<div/>', {
        "class": 'col-lg-4',
        append: $('<img/>', {
          src: pictures[i],
          id: 'img' + i,
          "class": 'img-responsive',
          height: 300
        })
      })
    })
    carouselInner.append(imgElement);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div id='myContent'></div>
</div>

Answer 2

Note: Frist div have 'item' and 'active' class, and all other div have only 'item' class then it will work otherwise it will not work.

             <div class="item active">
                <div class="col-lg-4">
                  <img src='images/image1.jpg' id='img' class='img-responsive' width='250' height='300' />
                </div>
              </div>
              <div class="item">
                <div class="col-lg-4">
                  <img src='images/image2.jpg' id='img' class='img-responsive' width='250' height='300' />
                </div>
              </div>
              <div class="item">
                <div class="col-lg-4">
                  <img src='images/image3.jpg' id='img' class='img-responsive' width='250' height='300' />
                </div>

Its working for me, hopefully it will also work for you. Thank you!!!!!!!!