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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 02:41:52  来源:igfitidea点击:

OwlCarousel2 - Add Item + Update Carousel

jquerytwitter-bootstrapowl-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:

连同演示:

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

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

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 updateover the event API which is not possible (see above). Use refreshinstead.

第二个错误是您试图调用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!

问候!