我已将图像动态添加到轮播中,但无法正常工作。我只有图像,但没有轮播格式。这是我的代码,如下所示。
<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
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] 删除。
我来说两句