Owlcarousel2: Destroy then re-enable?

Created on 10 Jul 2014  路  19Comments  路  Source: OwlCarousel2/OwlCarousel2

Hello,

Has anyone got an example of destroying a carousel and then re-enabling it later on?

I'm basically destroying a carousel on small devices and then trying to re-enable the carousel when its resized back to large devices.

When I destroy the carousel and resize i get errors in the console:

Uncaught TypeError: Cannot read property '_checkVisibile' of null
Uncaught TypeError: Cannot read property '_onResize' of null

Not sure if its a bug or something I'm doing wrong.

Thanks

bug wontfix
Source
picture jasonujmaalvis

All 19 comments

Sorry but you have to re-create the carousel:

$('.owl-carousel')
  .owlCarousel({...})
  .owlCarousel('destroy')
  .owlCarousel({...})

A re-enabling will be not possible in the near feature.

witrin picture witrin on 24 Jul 2014
👍1

This is a bit of a deal breaker as jasonalvis explains...with responsive website you sometimes need to destroy and recreate the carousel depending on the viewport size, please fix this bug!

stevenbriscoeca picture stevenbriscoeca on 25 Aug 2014

This is nether a bug nor a "deal breaker". You're able to destroy and (re)create, see above. But there will be no single method for this. That's all :).

witrin picture witrin on 26 Aug 2014

I think we've side tracked a bit with the point.

I'm happy to destroy and re-create the carousel, this is fine and how I expected it to be. The problem is when I destroy the carousel and then carry on resizing the browser I get a JS error which reads:

Uncaught TypeError: Cannot read property '_onResize' of null

It looks like the _onResize is still being ran even though the carousel was just destroyed?
screen shot 2014-08-27 at 16 40 34

jasonujmaalvis picture jasonujmaalvis on 27 Aug 2014
👍1

First of all, I must say OwlCarousel is turning to be one of the greatest jQuery carousels I worked with it.

I'm having the exact same problem. My code is something like this (not the real code, just an example, the real code builds an assortment of slides with several items on each slide):

$photoCarousel = $('#my-carousel');
$photoCarouselHTML = '

item
item
item
';
buildTotemCarousel(data); // here, I inject the HTML on my #my-carousel and initialize the carousel as usual...

//... then, on a