How to re-render a owl-carousel item?
Solution 1
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.
Solution 2
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
Solution 3
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');
})
Solution 4
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
}
Solution 5
As for 2.0.0-beta.2.4 this works for me:
var $owl = $('.owl-carousel');
if ($owl.data('owlCarousel')) {
$owl.data('owlCarousel').onThrottledResize();
}
Comments
-
Alfred Huang almost 2 years
Well, I'm using a owl-carousel-2 plugin now.
And I encounter the following problem:
The markup code:
<div class="owl-carousel" style="display: none;"> <div class="item"><img src="..." /></div> <div class="item"><img src="..." /></div> <!-- ... --> <div class="item"><img src="..." /></div> </div> <script> $(function() { var $owl = $('.owl-carousel'); $owl.owlCarousel(); // Doing many things here. $owl.show(); }); </script>
The problem is:
When I initialize with the
$owl.owlCarousel();
statement, which under an hidden state, its size is not initialized.So when I show that control, the control displays in a mess!
But when I resize the window, it seemed to be triggering a re-render. The control render the contents, then displayed well.
So I'm wondering if there is a way to trigger this re-render (or refresh) method on it.
In order to make sure the control won't display in a mess.
I tried to read the documents and sources, but not yet have a good solution.
Please help.
-
atmd over 9 yearshow are you calling it?
-
Alfred Huang over 9 years$owl.trigger('refresh.owl.carousel');
-
Xinan over 8 yearsThis is so far the only working solution I found across Internet.
-
Abdul Sadik Yalcin about 8 yearsThis is the solution. My problem was when going fullscreen. The html would not re-render on Chrome only: as a result the content was blurry/pixelated.
-
Admin about 8 yearsNote that the above will work only for owlCarousel v1 (The OP is using v2).
-
Giacomo Paita almost 7 yearsthe link is broken
-
Paramjeet almost 4 years$owl.html('') after destroying and then initialize and it worked.
-
Irina over 2 yearsrefreshing doesn't seem to re-render. Tried and didn't work. Or maybe i'm missing something.
-
atmd over 2 yearsthe question here is from 7 years ago @Irina so prob no longer useful with current versions