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.

by "hidden state" do you mean display:none;? what happens if you use visibility:hidden; ? — atmd, Jan 14 '15 at 17:23
@atmd Yes, by display: none. But what I really want is the way of triggering a rerender. — Alfred Huang, Jan 15 '15 at 01:25

Alfred Huang · Accepted Answer · 2015-06-24T09:48:25.977

42

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.

edited Jun 24 '15 at 09:48

answered Jan 16 '15 at 02:52

Alfred Huang

15,204
31
99
176

This is so far the only working solution I found across Internet. – Xinan Oct 26 '15 at 05:00
$owl.html('') after destroying and then initialize and it worked. – Paramjeet May 24 '20 at 10:27

score 14 · Answer 2 · answered Jan 27 '16 at 08:39

14

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

answered Jan 27 '16 at 08:39

mstuercke

722
1
8
18

This 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. – Abdul Sadik Yalcin Mar 15 '16 at 14:53
3

Note that the above will work only for owlCarousel v1 (The OP is using v2). – Mar 15 '16 at 19:24
3

the link is broken – Giacomo Paita May 25 '17 at 08:02

score 5 · Answer 3 · edited Apr 16 '20 at 06:03

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

cMarius · Answer 4 · 2016-06-21T09:20:39.400

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
        }

score 3 · Answer 5 · answered Sep 20 '16 at 08:06

3

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

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

answered Sep 20 '16 at 08:06

Ruslan Belziuk

56
2

score 3 · Answer 6 · answered Aug 02 '17 at 18:17

3

With Owl Carousel 2 you reinitialize like so:

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

see this issue.

answered Aug 02 '17 at 18:17

ummdorian

259
3
4

score 2 · Answer 7 · edited Feb 27 '19 at 11:21

2

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

edited Feb 27 '19 at 11:21

Shabbir Dhangot

8,089
9
55
75

answered Jan 15 '15 at 07:57

atmd

7,034
2
28
62

how are you calling it? – atmd Jan 16 '15 at 07:58
3

$owl.trigger('refresh.owl.carousel'); – Alfred Huang Jan 16 '15 at 08:36

How to re-render a owl-carousel item?

The markup code:

7 Answers7

Main procedure:

Linked