Question

我尝试使用jquery函数addItem动态地在owl-carousel上添加项目，但是不能正常工作，并且在控制台上我有：＆＃34; 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项目吗？

Answer 1

尝试在初始化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);

Answer 2

打开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');

Answer 3

我无法使用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();

动态addItem的Owl-Carousel问题

3 个答案: