动态 addItem 的 Owl-Carousel 问题答案

【问题标题】：Owl-Carousel issue with dynamic addItem动态 addItem 的 Owl-Carousel 问题
【发布时间】：2015-06-11 15:36:00
【问题描述】：

我将尝试使用 jquery 函数 addItem 在 owl-carousel 上动态添加项目，但不起作用，并且在控制台上我有：“addItem 不是函数”。

 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);

还有其他方法可以在 owl carousel 上加载动态项目吗？

【问题讨论】：

标签： jquery owl-carousel

【解决方案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);

【讨论】：

【解决方案2】：

打开猫头鹰的主页链接(http://www.owlgraphic.com/owlcarousel/index.html) owl 有一个新版本。（新版本 2.0.0-beta 现在可供测试人员使用。检查一下）-(http://www.owlcarousel.owlgraphic.com/)
调用 'addItem()' 的方法改变了。你需要学习版本2的文档 http://www.owlcarousel.owlgraphic.com/docs/started-welcome.html
查看代码 sn-p：

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;

var content = '<div class="owl-item">' + html + '</div>';
owl.trigger('add.owl.carousel', [$(content), 0]).trigger('refresh.owl.carousel');
    
// 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

【讨论】：

【解决方案3】：

我也无法让 addItem 方法工作。我认为最好的选择是在 html 中添加 item 组件，然后初始化 owl carousel。

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

【讨论】：