动态addItem的Owl-Carousel问题

时间:2015-06-11 15:36:00

标签: jquery owl-carousel

我尝试使用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项目吗?

3 个答案:

答案 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)

  1. 打开owl(http://www.owlgraphic.com/owlcarousel/index.html)的主页链接 有一个新版本的猫头鹰。(新版本2.0.0-beta现在可供测试人员使用。查看) - (http://www.owlcarousel.owlgraphic.com/

  2. 调用'addItem()'的方法已更改。你需要学习version2的doc http://www.owlcarousel.owlgraphic.com/docs/started-welcome.html

  3. 演示使用:

  4. 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();