6

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.

mheppler9d
  • 169
  • 2
  • 2
  • 9
  • read about: reinit http://owlgraphic.com/owlcarousel/demos/manipulations.html or try destroy and create again – user956584 Jul 24 '14 at 16:46
  • I've seen the manipulations documentation for v1.3.2, and had a prototype working, but when I started using 2.0.0-beta.2.4, I have not been able to use the approach. In the JSFiddle I provided, I can add the new 'item' to the carousel source, but I've tested refresh, update, reinit, destory, and haven't gotten anywhere when trying to get the carousel to acknowledge it and display it properly. Updated Demo: http://jsfiddle.net/52r9B/12/ – mheppler9d Jul 24 '14 at 18:34

3 Answers3

13

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!

Scott Buchanan
  • 1,163
  • 1
  • 11
  • 28
witrin
  • 3,701
  • 1
  • 24
  • 49
4

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!

Radames E. Hernandez
  • 4,235
  • 27
  • 37
0

You can simply use add & update options with the position specified.

// appends an item as the first item
$('.owl-carousel').owlCarousel('add', '<div>foo</div>', 0).owlCarousel('update');

// appends an item as the 2nd item
$('.owl-carousel').owlCarousel('add', '<div>foo</div>', 1).owlCarousel('update');

// appends an item as the 4rth item
$('.owl-carousel').owlCarousel('add', '<div>foo</div>', 3).owlCarousel('update');

// appends an item as the last item - if you don't specify it will add to the end
$('.owl-carousel').owlCarousel('add', '<div>foo</div>').owlCarousel('update');
Zahidul Islam Ruhel
  • 1,114
  • 7
  • 17