OwlCarousel2 - 添加项目 + 更新轮播答案

【问题标题】：OwlCarousel2 - Add Item + Update CarouselOwlCarousel2 - 添加项目 + 更新轮播
【发布时间】：2014-07-24 16:39:30
【问题描述】：

我一直难以将 Owl Carousel 添加到我们的应用程序中，并希望最新的 2.0.0-beta.2.4 版本会更容易，但我无法仅获得添加项目的基本功能并更新轮播以正常工作。

我在这里做错了吗？

这是我正在使用的代码：

$('#insert').on('click', function () {
    owl.trigger('add.owl.carousel', '<div class=\"item\"><p>D</p></div>').trigger('update.owl.carousel');
});

还有一个演示：

http://jsfiddle.net/52r9B/11/

文档 (http://www.owlcarousel.owlgraphic.com/docs/started-welcome.html) 似乎没有包含任何内容 - 除非我遗漏了一些明显的内容。

任何帮助将不胜感激。

【问题讨论】：

阅读：reinit owlgraphic.com/owlcarousel/demos/manipulations.html 或尝试销毁并再次创建
我看过 v1.3.2 的操作文档，并且有一个原型可以工作，但是当我开始使用 2.0.0-beta.2.4 时，我无法使用该方法。在我提供的 JSFiddle 中，我可以将新的“项目”添加到轮播源中，但是我已经测试了刷新、更新、重新初始化、销毁，并且在尝试让轮播确认并显示它时没有得到任何结果适当地。更新的演示：jsfiddle.net/52r9B/12

标签： jquery twitter-bootstrap owl-carousel

【解决方案1】：

自上个月以来，OwlCarousel 2.0 正在进行大量重构。所以你使用的版本（2.0.0-beta.2.4）已经过时了。

这是您的演示的有效Codepen。您的第一个错误是您使用事件 API 添加新项目而没有将参数放入数组中：

// Right
$('.owl-carousel').trigger('add.owl.carousel', [first, second])
// Wrong
$('.owl-carousel').trigger('add.owl.carousel', first, second)

您也可以像这样使用插件方法：

$('.owl-carousel').owlCarousel('method', first, second, third, ...)

主要区别在于事件 API 仅提供所有公共方法的子集。

第二个错误是您试图通过事件 API 调用 update，这是不可能的（见上文）。请改用refresh。

要查看最新开发，您需要自行build，直到下一个pre-release 到来。但请耐心等待，这仍然是测试版！

【讨论】：

【解决方案2】：

这是另一种方法，这个解决方案适合我，而且非常简单：

// appends an item to the end
$('.owl-carousel').owlCarousel('add', '<div>foo</div>').owlCarousel('update');
// adds an item before the first item
$('.owl-carousel').trigger('add.owl.carousel', [$('<div>bar</div>'), 0]).trigger('refresh.owl.carousel');

工作完美。

问候！

【讨论】：