使用jQuery动态添加项目后,轮播无法正常工作

ish

我已将图像动态添加到轮播中,但无法正常工作。我只有图像,但没有轮播格式。这是我的代码,如下所示。

<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
ish
    items.forEach(function(item){

              v = '/image/'+item.filename;
              image_temp = new Image();
              image_temp.src = v;
              image_temp.onload = function(){
         $('#owl-sunny').owlCarousel().trigger('add.owl.carousel',
         [jQuery('<div class="owl-item"><a href="/'+ item.filename +'"><img src="'+ v +'"></a><div class="product-description"><span>' + item.metadata.brand + '</span><a href=""><h6>'+ item.metadata.name + '</h6></a><p class="product-price">LKR. ' + item.metadata.price + '</p></div></div>')]).trigger('refresh.owl.carousel');

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章