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:

        
                      

              相关标签:
       
      

Answer 1

With Owl Carousel 2 you reinitialize like so:

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

see this issue.

Answer 2

As for 2.0.0-beta.2.4 this works for me:

var $owl = $('.owl-carousel');
if ($owl.data('owlCarousel')) {
    $owl.data('owlCarousel').onThrottledResize();
}

Answer 3

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

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