Owlcarousel2: Trigger resize, refresh, initialize aren't working

[greguarr]

Event triggers 'resize.owl.carousel' or 'refresh.owl.carousel' aren't working.

Responsive is working fine when you resize whole window, but when you resize only div container with owl slider - it has still prewious width.
See example:
http://jsfiddle.net/greguarr/x8hs2omz/2/

I try use path, by call resize window event.
It's workind on modern browsers, but I don't know what how it works on others.
There is example with this path:
http://jsfiddle.net/greguarr/x8hs2omz/3/

[kwayyinfotech]

I have also same problem

[DusanMilko]

"initialized.owl.carousel" is not getting triggered

[mgntrn]

Same issue here

[michaelgiles]

Same issue here.

[greg5green]

I realize your question is about beta 2.4, but this section of code has changed quite a bit since then, so I'm going to speak on beta 3 and where to go from here. There's two problems here from what I can tell:

1. resize.owl.carousel isn't a triggerable event -- you can only listen for it.
2. There is no way to manually invalidate a property (and refresh.owl.carousel only refreshes things that have been invalidated). This should probably be updated tohave refresh.owl.carousel accept a parameter about what should be refreshed.

These updates are something I'd consider important to get done for the next release.

For a more immediate solution in beta 3, you can manually access the _invalidated property (with the caveat that this is an internal property, so there are no guarantees about it in the next release). Working example or code below:

function owlres() {
    var $carousel = $('.owl-carousel');        
    $carousel.data('owl.carousel')._invalidated.width = true;
    $carousel.trigger('refresh.owl.carousel');

    console.log('owlres');
}

There's probably something similar you could do for beta 2.4, but the code has changed quite a bit so the above method doesn't work.

[julianguy]

I used this approach, set up options and function like so:

  var wysiwyg_owloptions = {
    items:1,
    loop: true
  } 
function owlResize($owl) {
    $owl.trigger('destroy.owl.carousel');
    $owl.html($owl.find('.owl-stage-outer').html()).removeClass('owl-loaded');
    $owl.owlCarousel(wysiwyg_owloptions);
}

Then just call the function like so:

var $owl = $(".carousel).owlCarousel(wysiwyg_owloptions);;
owlResize($owl);

[milanagheda]

same problem is here tried all solution but nothing is worked

[camilleb]

This worked for me :

var owl = $('.owl-carousel').data('owl.carousel');
owl.onResize();

[aarell]

I'd upgraded to Beta 4 before I noticed a similar problem. I have a product image zoom on Owl images using Magnifik. In zoom mode, if the window is resized (e.g. portrait to landscape phone rotate), Owl seems to resize in the background and gets in a mess.

Thanks @camilleb - your solution doesn't work for me in beta 4 but I guess the namespace changed in this version (as @greg5green warns about internal changes). I dug down and used owlCarousel namespace instead, so this works for me (in my case wrapped with a small delay to allow settling after the zoom closes):

var owl = $('.owl-carousel').data('owlCarousel');
owl.onResize();

[greg5green]

Just to clear this up, that as of today (April 4th, 2016), there is no beta 4. There is a poorly named beta 2.4 and a beta 3.

@aarell you have probably moved backwards to beta 2.4.

[daviddeutsch]

Yeah, I should really clear up the versioning in general. I'm happy to take suggestion! @greg5green?

[sercanbadem]

Sometimes Owl carousel has calculate problem on resize. If you have position problem, you can set as:
.owl-carousel{ width:100vw; } i solved with this.

[vdswouter]

I know it is not pretty,
but this worked for me to force a recalculation

 this.$carousel.trigger('next.owl.carousel');
 this.$carousel.trigger('prev.owl.carousel');

[rufatZZ]

@julianguy Man!. Thanks for your help :)

[mrjosshi]

autoHeight is not working in reactjs any Help please?

[AnthonySaldana]

I've been dealing with a weird annoying issue for a while where the carousel would not render correctly. Probably because it was rendering before my other scripts processed and causing the sizing calculations to be off.

Anyway, thanks to @greg5green I was able to just re render it when the time was right!!

This worked for me. Set the invalidated property to true and trigger a refresh!

var $carousel = $('.owl-carousel');        
$carousel.data('owl.carousel')._invalidated.width = true;
$carousel.trigger('refresh.owl.carousel');

[heroselohim]

Ok, none of this solutions worked for me and this is an alternative solution.

Just emit a global 'resize' event.

window.dispatchEvent(new Event('resize'));

[sadikyalcin]

There are still issues with calculations. Especially when going fullscreen. Refresh / resize does not trigger. Mainly because of the differences in browsers and their transform origins. Only solution is to attach a global resize event like @heroselohim suggested.

To be more specific, initially my carousel would be a 4:3 ratio. I swap to a 16:9 when going fullscreen. I.e. 1024 becomes 1366. Owl carousel fails to adapt to new size. It's a mess on safari at the moment.

[harshvardhanmalpani]

@heroselohim I had an issue very similar to #612 and triggering a resize event solved it. Thanks

[zodit]

The carousel is refreshing using the corners of the window, but it is not refreshing using the minimize/maximize button. I am not sure why the resize event is not triggering. I solved following the previous suggestions, adding a little JQuery like this:

$(window).resize(function(){ $('.owl-carousel').trigger('refresh.owl.carousel'); });

[BarryMode]

@zodit Thanks, this worked for me. I feel like it should just do that behavior by default.

[kundankumarmourya]

I found the owl carousel refresh on window resize.
https://stackoverflow.com/questions/43371342/reload-owl-carousel-2-when-side-navigation-opens-or-closes

[oenline]

Ok, none of this solutions worked for me and this is an alternative solution.

Just emit a global 'resize' event.

window.dispatchEvent(new Event('resize'));

This worked for me, thanks a lot.