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:
- Destroy that owl-carousel.
- Manually change the markup to the initial state.
- 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
}