OwlCarousel2 - Add Item + Update Carousel

Question

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.

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/

The documentation (http://www.owlcarousel.owlgraphic.com/docs/started-welcome.html) doesn't seem to include anything - unless I'm missing something obvious.

Any help would be appreciated.

Answer 1

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.

Here is a working Codepen of 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:

// 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.

The second mistake was that you have tried to call update over the event API which is not possible (see above). Use refresh instead.

To checkout the latest development you need to build it at your own until the next pre-release is coming. But please be patient this is still beta!