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 = $('
', {
      id: "theCarousel3",
      "class": "carousel slide multi-item-carousel",
      append: '
'
    }),
    carouselInner = carousel.find('.carousel-inner').eq(0);

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