How to re-render a owl-carousel item?

Question

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.

Answer 1

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.

Answer 2

With Owl Carousel 2 you reinitialize like so:

jQuery('.owl-carousel').trigger('refresh.owl.carousel');

see this issue.

Answer 3

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

Answer 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
        }

Answer 5

Have you read the documentation of the plugin you are using, because the owl carousel has a refresh method when you want to update the carousel.

refresh.owl.carousel

Type: attachable, cancelable, triggerable
Callback: onRefresh
Parameter: [event, speed]

The docs are here for events

Answer 6

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');
})