6

我一直难以将 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）似乎没有包含任何内容——除非我遗漏了一些明显的东西。

任何帮助，将不胜感激。

4

2 回答 2

13

自上个月以来，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 仅提供所有公共方法的子集。

第二个错误是您试图调用update不可能的事件 API（见上文）。改为使用refresh。

要检查最新的开发，您需要自己构建它，直到下一个预发布版本到来。但请耐心等待，这仍然是测试版！

于 2014-08-03T21:49:27.503 回答
4

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

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

工作完美。

问候！

于 2017-09-18T17:32:36.203 回答