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 jso

Answer 1

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();