带有jQuery的HTML轮播不会改变图像

Question

我正在尝试使用来自 servlet 的一些图像制作一个轮播。我设法创建了轮播，但图像没有改变。始终是数组中的第一个图像。我确实从 din 文章中获得了代码：Bootstrap Carousel not working after adding items dynamically with jQuery。但我不允许对文章发表评论。 :(

<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>

更新：我使用 owlcarousel。

Answer 1

您需要将第一张幻灯片设置为活动类。

尝试改变这个：

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

到

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

Answer 2

此外，${houseImages.size()} 未在您的 sn-p 中定义，因此您的循环根本没有运行。