How to re-render a owl-carousel item?

Ran into the same issue with OP. I manage to get it to work by first removing the owl-loaded class. Then on render, trigger a refresh event after re-adding the class.

// Remove the owl-loaded class after initialisation 
$owl.owlCarousel().removeClass('owl-loaded');

// Show the carousel and trigger refresh
$owl.show(function() {
  $(this).addClass('owl-loaded').trigger('refresh.owl.carousel');
})

I found out an ugly, dirty solution. Anyway, it worked:

Main procedure:

  1. Destroy that owl-carousel.
  2. Manually change the markup to the initial state.
  3. Initialize the owl-carousel.

var $owl = $('.owl-carousel');
$owl.trigger('destroy.owl.carousel');
// After destory, the markup is still not the same with the initial.
// The differences are:
//   1. The initial content was wrapped by a 'div.owl-stage-outer';
//   2. The '.owl-carousel' itself has an '.owl-loaded' class attached;
//   We have to remove that before the new initialization.
$owl.html($owl.find('.owl-stage-outer').html()).removeClass('owl-loaded');
$owl.owlCarousel({
    // your initial option here, again.
});

It worked, but in such a dirty way. Hoping to see a better, neat solution.


This works for me:

// get owl element
var owl = $('.owl-carousel');

// get owl instance from element
var owlInstance = owl.data('owlCarousel');

// if instance is existing
if(owlInstance != null)
    owlInstance.reinit();

More information: http://owlgraphic.com/owlcarousel/demos/manipulations.html


This is my solution, based on fish_ball's clever workaround:

if($('.owl-carousel').hasClass('owl-theme')){ //resize event was triggering an error, this if statement is to go around it

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

            $(".owl-carousel").owlCarousel(); //re-initialise the owl
        }