Load dynamic content in Owl Carousel 2

Question

I have a webpage with 2 carousels in which I have to show different items depending on user actions.

The new data comes from the internet, I use fetch, parse the json into an array, all good.

Only problem is I can't have the new items replace the old ones in the carousel.

For a simple example I have tried

var carousel = $jq("#owl-genres");
for(...) {
   carousel.owlCarousel()
       .trigger('add.owl.carousel', [$jq('<div class="item">' + genres[i] + '</div>')])
       .trigger('refresh.owl.carousel');
}

but nothing happens. The old elements remains, although the methods executes and the .trigger is executed.

I have also tried

for(...) {
   content += '<div class=\'item\'>' + genres[i] + '</div>'
   carousel.html(content)
}
carousel.owlCarousel().trigger('refresh.owl.carousel');

which indeed adds the new items to the carousel but they are now vertically stacked, the navigation doesn't work, I guess the whole carousel is broken.

So what's the correct way to replace the items in Owl Carousel 2?

Solution

Solution based on https://stackoverflow.com/a/37862372/4249825

This can all be put in a function which receives the new array of elements to display and be executed as soon as we fetch new data. Hope it will help others (I saw there are many questions about this...)

//these 3 lines kill the owl, and returns the markup to the initial state
carousel.trigger('destroy.owl.carousel'); 
carousel.find('.owl-stage-outer').children().unwrap();
carousel.removeClass("owl-center owl-loaded owl-text-select-on");

// add the new items 
for (var i = 0; i < genres.length; i++) { 
     content += "<div class=\"item\">" + genres[i] + "</div>"
}
carousel.html(content);

//reinitialize the carousel (call here your method in which you've set specific carousel properties)
carousel.owlCarousel();