jQuery OwlCarousel2 - 添加项目 + 更新轮播
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/24939427/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
OwlCarousel2 - Add Item + Update Carousel
提问by mheppler9d
I've been having difficulty adding the Owl Carousel to our app, and was hoping that the latest 2.0.0-beta.2.4 version would be easier, but I am not able to just get the basic feature of adding an item and updating the carousel to work.
我一直难以将 Owl Carousel 添加到我们的应用程序,并希望最新的 2.0.0-beta.2.4 版本会更容易,但我无法获得添加项目和更新项目的基本功能轮播工作。
Is there something I am doing wrong here?
我在这里做错了吗?
Here is the code I am using:
这是我正在使用的代码:
$('#insert').on('click', function () {
owl.trigger('add.owl.carousel', '<div class=\"item\"><p>D</p></div>').trigger('update.owl.carousel');
});
Along with a demo:
连同演示:
The documentation (http://www.owlcarousel.owlgraphic.com/docs/started-welcome.html) doesn't seem to include anything - unless I'm missing something obvious.
文档(http://www.owlcarousel.owlgraphic.com/docs/started-welcome.html)似乎没有包含任何内容 - 除非我遗漏了一些明显的内容。
Any help would be appreciated.
任何帮助,将不胜感激。
回答by witrin
Since the last months OwlCarousel 2.0 is under heavy re-factoring. So the version you have used (2.0.0-beta.2.4) is already outdated.
自上个月以来,OwlCarousel 2.0 正在进行大量重构。所以你使用的版本(2.0.0-beta.2.4)已经过时了。
Here is a working JS Binof your demo. Your first mistake was that you have used the event API to add a new item without putting the arguments into an array:
这是您演示的有效JS Bin。您的第一个错误是您使用事件 API 添加了一个新项目,而没有将参数放入数组中:
// Right
$('.owl-carousel').trigger('add.owl.carousel', [first, second])
// Wrong
$('.owl-carousel').trigger('add.owl.carousel', first, second)
Alternatively you could use the plugin method like this:
或者,您可以使用这样的插件方法:
$('.owl-carousel').owlCarousel('method', first, second, third, ...)
The main difference is that the event API only provides a subset of all public methods.
主要区别在于事件 API 仅提供所有公共方法的一个子集。
The second mistake was that you have tried to call update
over the event API which is not possible (see above). Use refresh
instead.
第二个错误是您试图调用update
事件 API,这是不可能的(见上文)。使用refresh
来代替。
To checkout the latest development you need to buildit at your own until the next pre-releaseis coming. But please be patient this is still beta!
回答by Radames E. Hernandez
This is an other way to do that, this solution work's for me and it's very simple:
这是另一种方法,这个解决方案对我有用,而且非常简单:
// 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');
Work's perfectly.
工作完美。
Regards!
问候!