jquery - 使用 jQuery 动态添加项目后轮播不工作

Question

我将图像动态添加到轮播中，但它们不起作用。我只得到图像，但没有轮播格式。这是我的代码，如下所示。

<div id="summeritems" class="popular-products-slides owl-carousel">
    <!-- Single Product -->

    <!-- End -->
</div>

//Jquery 代码

items.forEach(function(item){
var result =  `<div class="single-product-wrapper">
 <div class="product-img">
  <img src="/image/${item.filename}" alt="">
  <div class="product-favourite">
    <a href="#" class="favme fa fa-heart"></a>
  </div>
</div>
<div class="product-description">
  <span>${item.metadata.brand}</span>
  <a href="single-product-details.html">
    <h6>${item.metadata.name}</h6>
  </a>
  <p class="product-price">LKR. 
  ${item.metadata.price}</p>
  <div class="hover-content">
    <!-- Add to Cart -->
    <div class="add-to-cart-btn">
      <a href="#" class="btn essence-btn">Add to 
      Cart</a>
    </div>
  </div>
</div>
</div>`
$('#summeritems').append(result); // Add Images to Navigation Slider

Answer 1

添加新元素后，您需要更新轮播。像这样:

var owl = $('#summeritems');
owl.owlCarousel();

// Your code
items.forEach(function(item){
  var result =  '... HTML of new elements ...';
  $('#summeritems').append(result); // Add Images to Navigation Slider
});

// update carousel at the end
owl.trigger('refresh.owl.carousel');

更多API官方文档非常有帮助:Owl carousel API