HTML carousel with jQuery doesn't change image

Question

I'm trying to make a carousel with some images from a servlet. I managed to create the carousel, but the image doesn't change. Is always the first image from array. I did get the code from din article: Bootstrap Carousel not working after adding items dynamically with jQuery . But I'm not allowed to comment at the article. :(

<div class="container-fluid">
    <div id='myContent'></div>
</div>
<p>${offer.toString()}</p>
<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>
<script type="text/javascript">
    $(function() { 
     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 <${houseImages.size()}; i++) {
    imgElement = $('<div />', { "class": "item" + (i ? '' : ' active'),
        append: $('<div/>', { "class": 'col-lg-4', append: $('<img/>', {
          src:'data:image/jpg;base64,${houseImages.get(i)}', id: 'img' + i,
          "class": 'img-responsive',
          height: 300
        })
      })
    })
    carouselInner.append(imgElement);
  }
})
</script>

Update: I use owlcarousel.

Answer 1

You need set the first slide with active class.

Try change this:

"class": "item" + (i ? '' : ' active')

to

"class": "item" + (i == 0 ? ' active' : ''),

Answer 2

此外，您的代码段中未定义${houseImages.size()} ，因此循环根本没有运行。