动态地将图像url附加到owl旋转木马2
append image url dynamically to owl carousel 2
我已经将owl carousel 2用于产品滑块。产品是从管理面板添加的，需要在前端显示，包括图像。我可以添加图像并在前面调用它们，但它不适合猫头鹰旋转木马，这会在网站上造成混乱的外观。如果我直接把它放在图像源中，它可以工作，但从Javascript调用不起作用。我所需要的只是产品信息和图像应该适合，猫头鹰旋转木马2应该是支持的。我使用的是jquery 2.1.4和bootstrap 3。
HTML:
<div class="col-sm-12">
<div class="block block-tabs">
<div class="block-head">
<div class="block-title">
<div class="block-title-text text-lg">best selling</div>
</div>
<ul class="nav-tab">
<li class="active"><a data-toggle="tab" href="#tab-1">All</a></li>
<li ><a data-toggle="tab" href="#tab-2">Personalised</a></li>
<li><a data-toggle="tab" href="#tab-2">Photo Books</a></li>
<li><a data-toggle="tab" href="#tab-1">Calanders</a></li>
<li><a data-toggle="tab" href="#tab-2">LED Lights</a></li>
</ul>
</div>
<div class="block-inner">
<div class="tab-container">
<div id="tab-1" class="tab-panel fade in active">
<ul id="tab1" class="products kt-owl-carousel" data-margin="20" data-loop="true" data-nav="true" data-responsive='{"0":{"items":1},"600":{"items":3},"1000":{"items":5}}'>
</ul>
</div>
<div id="tab-2" class="tab-panel fade">
<ul class="products kt-owl-carousel" data-margin="20" data-loop="true" data-nav="true" data-responsive='{"0":{"items":1},"600":{"items":3},"1000":{"items":5}}'>
<li class="product">
<div class="product-container">
<div class="product-left">
<div class="product-thumb">
<a class="product-img" href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="Product"></a>
<a title="Quick View" href="#" class="btn-quick-view">Quick View</a>
</div>
</div>
<div class="product-right">
<div class="product-name">
<a href="#">Cotton Lycra Leggings</a>
</div>
<div class="price-box">
<span class="product-price">139.98</span>
<span class="product-price-old">169.00</span>
</div>
<div class="product-star">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
<div class="product-button">
<a class="btn-add-wishlist" title="Add to Wishlist" href="#">Add Wishlist</a>
<a class="btn-add-comparre" title="Add to Compare" href="#">Add Compare</a>
<a class="button-radius btn-add-cart" title="Add to Cart" href="#">Cart<span class="icon"></span></a>
</div>
</div>
</div>
</li>
<li class="product">
<div class="product-container">
<div class="product-left">
<div class="product-thumb">
<a class="product-img" href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="Product"></a>
<a title="Quick View" href="#" class="btn-quick-view">Quick View</a>
</div>
</div>
<div class="product-right">
<div class="product-name">
<a href="#">Cotton Lycra Leggings</a>
</div>
<div class="price-box">
<span class="product-price">139.98</span>
<span class="product-price-old">169.00</span>
</div>
<div class="product-star">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
<div class="product-button">
<a class="btn-add-wishlist" title="Add to Wishlist" href="#">Add Wishlist</a>
<a class="btn-add-comparre" title="Add to Compare" href="#">Add Compare</a>
<a class="button-radius btn-add-cart" title="Add to Cart" href="#">Cart<span class="icon"></span></a>
</div>
</div>
</div>
</li>
<li class="product">
<div class="product-container">
<div class="product-left">
<div class="product-thumb">
<a class="product-img" href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="Product"></a>
<a title="Quick View" href="#" class="btn-quick-view">Quick View</a>
</div>
</div>
<div class="product-right">
<div class="product-name">
<a href="#">Cotton Lycra Leggings</a>
</div>
<div class="price-box">
<span class="product-price">139.98</span>
<span class="product-price-old">169.00</span>
</div>
<div class="product-star">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
<div class="product-button">
<a class="btn-add-wishlist" title="Add to Wishlist" href="#">Add Wishlist</a>
<a class="btn-add-comparre" title="Add to Compare" href="#">Add Compare</a>
<a class="button-radius btn-add-cart" title="Add to Cart" href="#">Cart<span class="icon"></span></a>
</div>
</div>
</div>
</li>
<li class="product">
<div class="product-container">
<div class="product-left">
<div class="product-thumb">
<a class="product-img" href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="Product"></a>
<a title="Quick View" href="#" class="btn-quick-view">Quick View</a>
</div>
</div>
<div class="product-right">
<div class="product-name">
<a href="#">Cotton Lycra Leggings</a>
</div>
<div class="price-box">
<span class="product-price">139.98</span>
<span class="product-price-old">169.00</span>
</div>
<div class="product-star">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
<div class="product-button">
<a class="btn-add-wishlist" title="Add to Wishlist" href="#">Add Wishlist</a>
<a class="btn-add-comparre" title="Add to Compare" href="#">Add Compare</a>
<a class="button-radius btn-add-cart" title="Add to Cart" href="#">Cart<span class="icon"></span></a>
</div>
</div>
</div>
</li>
<li class="product">
<div class="product-container">
<div class="product-left">
<div class="product-thumb">
<a class="product-img" href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/0/03/Mountain_Bluebird.jpg" alt="Product"></a>
<a title="Quick View" href="#" class="btn-quick-view">Quick View</a>
</div>
</div>
<div class="product-right">
<div class="product-name">
<a href="#">Cotton Lycra Leggings</a>
</div>
<div class="price-box">
<span class="product-price">139.98</span>
<span class="product-price-old">169.00</span>
</div>
<div class="product-star">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
<div class="product-button">
<a class="btn-add-wishlist" title="Add to Wishlist" href="#">Add Wishlist</a>
<a class="btn-add-comparre" title="Add to Compare" href="#">Add Compare</a>
<a class="button-radius btn-add-cart" title="Add to Cart" href="#">Cart<span class="icon"></span></a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Javascript：
$(function () {
init_carousel();
var url = '../Home/FrontProduct';
var data1 = {};
$.post(url, data1, function (data) {
OnSuccess(data);
});
function OnSuccess(data) {
var xmlDoc = $.parseXML(data);
var xml = $(xmlDoc);
var All = xml.find("All");
var AllrowCount = Math.ceil(All.length);
var content_g = '';
for (var p = 0; p < AllrowCount; p++) {
var Allrow = $(All[p]);
var content = '';
content = '<div class="item">' +
' <div class="product-container">' +
' <div class="product-left">' +
' <div class="product-thumb">' +
' <a class="product-img" href="#"><img src="http://ashish81.honestteam.com/products/pro_img/' + Allrow.find("ProductImages").text() + '"></a>' +
'<a title="Quick View" href="#" class="btn-quick-view">Quick View</a>' +
'</div>' +
' </div>' +
'<div class="product-right">' +
' <div class="product-name">' +
' <a href="#">Cotton Lycra Leggings</a>' +
' </div>' +
' <div class="price-box">' +
' <span class="product-price">139.98</span>' +
' <span class="product-price-old">169.00</span>' +
' </div>' +
'<div class="product-star">' +
'<i class="fa fa-star"></i>' +
'<i class="fa fa-star"></i>' +
'<i class="fa fa-star"></i>' +
'<i class="fa fa-star"></i>' +
'<i class="fa fa-star-half-o"></i>' +
'</div>' +
'<div class="product-button">' +
'<a class="btn-add-wishlist" title="Add to Wishlist" href="#">Add Wishlist</a>' +
'<a class="btn-add-comparre" title="Add to Compare" href="#">Add Compare</a>' +
'<a class="button-radius btn-add-cart" title="Add to Cart" href="#">Cart<span class="icon"></span></a>' +
' </div>' +
' </div>' +
'</div>' +
'</div>';
content_g = content_g + content;
}
var owl = $('.kt-owl-carousel');
owl.prepare().trigger('add.owl.carousel', content_g);
}
});
/* Functions */
function init_carousel() {
$('.kt-owl-carousel').each(function () {
var config = $(this).data();
//config.navText = ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'];
var animateOut = $(this).data('animateout');
var animateIn = $(this).data('animatein');
if (typeof animateOut != 'undefined') {
config.animateOut = animateOut;
}
if (typeof animateIn != 'undefined') {
config.animateIn = animateIn;
}
var owl = $(this);
owl.owlCarousel(config);
$(this).find('.owl-item').removeClass('last-item');
$(this).find('.owl-item.active').last().addClass('last-item');
var t = $(this);
owl.on('changed.owl.carousel', function (event) {
var item = event.item.index;
t.find('.owl-item').removeClass('last-item');
setTimeout(function () {
t.find('.owl-item.active').last().addClass('last-item');
}, 100);
});
});
};
这是jfiddle
问题是在获得内容之前调用owlcarousel的init函数。因此，要解决这个问题，必须在ajax调用返回后立即对插件进行initialize。
类似这样的东西：
function ajaxLike() {
$('body').append('<div class="owl-carousel"> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> <div> Your Content </div> </div>');
// just after the html appears in the DOM you can initialize the owl plugin
ajaxCallback();
}
// add the html with script, just like you do after the ajax's call return
ajaxLike();
function ajaxCallback() {
$('.owl-carousel').owlCarousel({
margin:10
});
}.owl-item {
width:100px;
height:100px;
line-height:100px;
text-align:center;
background:red;
}<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css">
<script src="http://www.owlcarousel.owlgraphic.com/assets/vendors/jquery.min.js"></script>
<script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>http://jsbin.com/jetane
相关文章：
- 知道为什么我的旋转木马不会自动更改图片吗
- 禁用旋转木马中的下一个按钮和上一个按钮
- 旋转木马;启用内容安全策略时无法工作
- 在引导程序旋转木马中显示下一个图像
- 猫头鹰旋转木马2罐头't使渐变动画工作
- 猫头鹰旋转木马宽度计算错误
- 猫头鹰旋转木马动画未在Chrome中应用
- 猫头鹰旋转木马:无法读取属性'visibleItems'的未定义
- 在Javascript中设置多个小图像(如旋转木马）
- 如何使引导旋转木马保持图像纵横比
- 使用旋转木马在元素上切换类
- 将图像传递到Angular UI引导旋转木马
- 当ons惰性重复检测到更改时，如何使用ons旋转木马刷新列表
- 猫头鹰旋转木马2-拖动方向
- 带有JQuery和CSS的3D旋转木马-渲染不正确
- 如何将 .owl 分页移到主 owl 包装器之外?猫头鹰旋转木马2.
- OWL旋转木马移动+/-5张幻灯片
- 下一个和上一个按钮将在OWL旋转木马上滑动2个项目
- 动态地将图像url附加到owl旋转木马2
- OWL旋转木马2宽度不正确，显示所有项目
