Owlcarousel2: Destroy on resize issue

[pixedd]

When triggering destroy event on resize (only once), result is: TypeError: this.e is null for:

/**
 * Checks window `resize` event.
 * @protected
 */
Owl.prototype.onThrottledResize = function() {
    window.clearTimeout(this.resizeTimer);
    this.resizeTimer = window.setTimeout(this.e._onResize, this.settings.responsiveRefreshRate);
};

[witrin]

Please improve your bug report: https://github.com/OwlFonk/OwlCarousel2#bug-reports. Thanks!

[lmeurs]

I think I encountered the same bug. After destroying an Owl Carousel instance the following error is thrown when resizing the window (Windows 7, Chrome 38):

Uncaught TypeError: Cannot read property '_onResize' of null

See http://jsfiddle.net/lmeurs/7ph5s5me/.

Thanks so much for this great script!

[lmeurs]

When writing my previous post I encountered an error with the default debug fiddle right away (http://jsfiddle.net/eqbL6vLb/), so I removed the externally loaded JS + CSS files and pasted in minimized JS + CSS from http://owlcarousel.owlgraphic.com/download/owl.carousel.zip to successfully reproduce the bug from this thread.

Later I found out that the default debug fiddle loads jQuery 2.0 which appears to be incompatible with the current dev version of Owl. After loading ie. jQuery 1.8.3 the default debug fiddle worked great.

After setting up our bug trap again the bug appeared to be gone, hooray! See http://jsfiddle.net/lmeurs/bv5q9uxe/

NB: Could you please add concatenated files to this repository or update http://owlcarousel.owlgraphic.com/download/owl.carousel.zip? Thanks in advance!

[BjornFridal]

+1 same error

[dvera123]

any fix for this?

[dvera123]

I need to do more test here, but why this.e becomes null after destroy?

should not get their default values instead of null?

like these:

e = {
    _onDragStart: null,
    _onDragMove: null,
    _onDragEnd: null,
    _transitionEnd: null,
    _resizer: null,
    _responsiveCall: null,
    _goToLoop: null,
    _checkVisibile: null
};

[SuchyTheMaster]

I have exactly the same problem. :(

After destroying carousel by:

$('#myCarousel').trigger('destroy.owl.carousel');

carousel is destroyed, but durring resize it's generate error

Uncaught TypeError: Cannot read property '_onResize' of null

so all JS breaks down. :(

Even if this.e should give other values (not null), why don't wrap this this into try cath?
Maybe it will be temporrary solution to avoid breaking JS.

[PaskR]

Same problem after destroying carousel although I rebuilt it after...

[pixedd]

The js file in the repo is not the good one, you need to clone the repo and then rebuild it with Grunt.
This version should work fine : http://codepen.io/anon/pen/GJKBrR

[iamkeir]

I went digging in the code - looks like the responsive listener (specifically _onResize) is not being destroyed properly.

Tracked it down to line 622:
this.resizeTimer = window.setTimeout(this.e._onResize, this.settings.responsiveRefreshRate);

My JS is not great so I don't trust myself to fix it - but I thought I came up with a sneaky (and dirty) fix in the meantime: the error relates to a responsive carousel so I was going to reinit the carousel with responsive: false just before destroying it... however, I cannot find any function in OwlCarousel2 to reinitialise/change options of an existing Carousel.

Any ideas re 1) a fix or 2) a reinit function?

[iamkeir]

Or could you destroy within the responsive object?

responsive: {
  0 : { [[ all options here ]] },
  768 : { [[destroy here ]] }
}

[greg5green]

As far as I know, this is fixed in beta 3 (I think via 2064682).

Please upgrade to the newest version and if this issue still exists, we can reopen it.

[iamkeir]

Yep, can confirm that bug is no longer present in latest release - thanks @greg5green!

[vastra]

This is broken again in beta 2.4

When resizing the window:
owl.carousel.js:622 Uncaught TypeError: Cannot read property '_onResize' of null

[greg5green]

@vastra beta 3 is the most recent release that has this fixed

[swannknani]

+1

[daviddeutsch]

@swannknani - do you mean this bug has resurfaced? The last answer from @greg5green was that it was fixed.

[jesspritchard]

Should this release have the fix? https://github.com/OwlCarousel2/OwlCarousel2/releases/tag/2.0.0-beta.3

I have used this version and although it fixes the resize issue, now my carousel is blank?

[angelarted]

Well, I'm sad to write this, but I'm using the latest version downloaded from the website (2.0.0-beta.2.4) and this error still occurs.
Although it seems that in beta.3 (posted above, thanks a lot!) the issue has finally been fixed!
So my recommendation is to link as soon as possible the beta.3 version in the download button of the official website...!!!!

[vastra]

I switched to slick.js, I've been writing more code to try and fix
owlcarousel than I would've writing my own plug-in. I would recommend
trying slick.js as it hasn't failed me yet, using 5 different
configurations on the same site (ecommerce, clients just love those
carousels)

edit: when using a flex layout on slick slides, remember to remove the height: 100% set by default slick height to ensure the height is applied by flex