将图像 url 动态附加到 owl 轮播 2
append image url dynamically to owl carousel 2
我已将 owl 轮播 2 用于产品滑块。产品是从管理面板添加的，需要在前端显示，包括图像。我可以添加图像并在前面调用它们，但它不适合 owl 轮播，这会在网站上造成混乱的外观。如果我直接将它放在图像源中它可以工作，但是从 Javascript 调用不起作用。
我所需要的只是产品信息和图像应该适合，并且 owl carousel 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 调用 return.
之后 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>
我已将 owl 轮播 2 用于产品滑块。产品是从管理面板添加的，需要在前端显示，包括图像。我可以添加图像并在前面调用它们，但它不适合 owl 轮播，这会在网站上造成混乱的外观。如果我直接将它放在图像源中它可以工作，但是从 Javascript 调用不起作用。 我所需要的只是产品信息和图像应该适合，并且 owl carousel 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 调用 return.
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>