jQuery Owl Carousel on dynamically added items

Today I was stuck to initialise Owl Carousel on div whose items were added dynamically after an Ajax call.

Get Aman Beg’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Then I noticed that it was not working because I had added the initialisation code globally. So it was initialising on an empty div and then I added items dynamically. therefore I destroyed Owl Carousel and reinitialised it.

const $carousel = $('#productCarousel');

// Destroy old instance if exists

if ($carousel.hasClass('owl-loaded')){

$carousel.trigger('destroy.owl.carousel'); 

$carousel.html(productHtml); // Re-apply content

});

// Now init OwlCarousel

$carousel.owlcarousel({

loop: false, 

margin: 10, 

nav: true, 

dots: false, 

responsive: {

    0: {items: 1}, 

    600: {items: 2},

    1000: {items: 4}

}

});