我尝试使用jquery函数addItem动态地在owl-carousel上添加项目,但是不能正常工作,并且在控制台上我有:" addItem不是函数&#34 ;
var content = "<div class='item item-desktop' style='background: url("+urlimage+"); background-size:cover; background-position: center'>";
var carosello=$("#owl-carousel-desktop");
var dataCarosello=carosello.data('owlCarousel');
dataCarosello.addItem(content);
还有其他方法可以在猫头鹰旋转木马上加载dinamically项目吗?
答案 0 :(得分:4)
尝试在初始化carosello
后添加此内容:
carosello.owlCarousel();
总而言之,您将获得以下内容:
var content = "<div class='item item-desktop' style='background: url("+urlimage+"); background-size:cover; background-position: center'>";
var carosello = $("#owl-carousel-desktop");
carosello.owlCarousel();
var dataCarosello = carosello.data('owlCarousel');
dataCarosello.addItem(content);
答案 1 :(得分:0)
打开owl(http://www.owlgraphic.com/owlcarousel/index.html)的主页链接 有一个新版本的猫头鹰。(新版本2.0.0-beta现在可供测试人员使用。查看) - (http://www.owlcarousel.owlgraphic.com/)
调用'addItem()'的方法已更改。你需要学习version2的doc http://www.owlcarousel.owlgraphic.com/docs/started-welcome.html
演示使用:
var owl = $('.owl-carousel');
owl.owlCarousel({
margin: 10,
nav: true,
items: 10
});
var html = '<div class="item"><h4>N1</h4></div>';
//TODO: Needed wraped by class:owl-item, the argument content is different in Owl Carousel 2,
// it must be jquery object;
// https://github.com/smashingboxes/OwlCarousel2/issues/496
// https://github.com/smashingboxes/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L1289
// https://github.com/OwlFonk/OwlCarousel/blob/master/owl-carousel/owl.carousel.js#L1410
var content = '<div class="owl-item">' + html + '</div>';
owl.trigger('add.owl.carousel', [$(content), 0])
.trigger('refresh.owl.carousel');
答案 2 :(得分:0)
我无法使用addItem方法。我认为最好的选择是在html中添加项目组件,然后初始化猫头鹰轮播。
var html = "<div class='item item-desktop' style='background: url("+urlimage+"); background-size:cover; background-position: center'>"
var =$("#owl-carousel-desktop");
owl[0].innerHTML = html;
owl.owlCarousel();