Owl-Carousel issue with dynamic addItem

Question

I'll try to add item on owl-carousel dynamically, using the jquery function addItem, but don't work, and on the console I have: "addItem is not a function".

 var content = "<div  class='item item-desktop' style='background: url("+urlimage+"); background-size:cover; background-position: center'>";
 var carosello=$("#owl-carousel-desktop");
 var dataCarosello=carosello.data('owlCarousel');
 dataCarosello.addItem(content);

There is alternative ways to load dinamically item on owl carousel?

Answer 1

Try adding this after your initialization of carosello:

carosello.owlCarousel();

All in all leaving you with the following:

 var content = "<div  class='item item-desktop' style='background: url("+urlimage+"); background-size:cover; background-position: center'>";
 var carosello = $("#owl-carousel-desktop");
 carosello.owlCarousel();
 var dataCarosello = carosello.data('owlCarousel');
 dataCarosello.addItem(content);

Answer 2

1. Open the home link of owl(http://www.owlgraphic.com/owlcarousel/index.html) There is a new version of owl.(New version 2.0.0-beta now available for testers. Check it)-(http://www.owlcarousel.owlgraphic.com/)

2. Call the method of 'addItem()' is changed. You need learn doc of version2 http://www.owlcarousel.owlgraphic.com/docs/started-welcome.html

3. Code snippet for view:

var owl = $('.owl-carousel');
owl.owlCarousel({
  margin: 10,
  nav: true,
  items: 10
});
var html = '<div class="item"><h4>N1</h4></div>';

// TODO: Needed wraped by class:owl-item, the argument content is different in Owl Carousel 2,
// it must be jquery object;

var content = '<div class="owl-item">' + html + '</div>';
owl.trigger('add.owl.carousel', [$(content), 0]).trigger('refresh.owl.carousel');
    
// https://github.com/smashingboxes/OwlCarousel2/issues/496
// https://github.com/smashingboxes/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L1289
// https://github.com/OwlFonk/OwlCarousel/blob/master/owl-carousel/owl.carousel.js#L1410

Answer 3

I couldn't get the addItem method to work either. The best alternative in my opinion would be to add the item components in html and then initialize the owl carousel.

var html = "<div  class='item item-desktop' style='background: url("+urlimage+"); background-size:cover; background-position: center'>"

var =$("#owl-carousel-desktop");                                         
owl[0].innerHTML = html;

owl.owlCarousel();