How to reuse owl carousel 2.0?

Question

I know that in the first version of the owl carousel we do it like this:

var $carousel = $('#carousel'); var owl = $carousel.data('owlCarousel'); owl.reinit({touchDrag: false, mouseDrag: false;}); 

Ok, but how we do it in the second version, I don’t know how they renamed it.

Answer 1

For some reason, $ ('# your_carousel'). trigger ('destroy.owl.carousel') does not work correctly. it does not remove all classes that are needed to recreate the plugin.

You will need to remove them completely to destroy the "Owl Carousel 2". as described here in this release on github: https://github.com/smashingboxes/OwlCarousel2/issues/460

To destroy the owl function, use:

 $('#your_carousel').trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded'); $('#your_carousel').find('.owl-stage-outer').children().unwrap(); 

This worked fine for me:

 // find element $owl = $('body').find('#your_carousel'); // set the owl-carousel otions var carousel_Settings = { touchDrag: false, mouseDrag: false }; function initialize(){ var containerWidth = $('body').find('.navbar').outerWidth(); if(containerWidth <= 767) { // initialize owl-carousel if window screensize is less the 767px $owl.owlCarousel( carousel_Settings ); } else { // destroy owl-carousel and remove all depending classes if window screensize is bigger then 767px $owl.trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded'); $owl.find('.owl-stage-outer').children().unwrap(); } } // initilize after window resize var id; $(window).resize( function() { clearTimeout(id); id = setTimeout(initialize, 500); }); // initilize onload initialize(); 

Answer 2

You can do this with destroy , but you should use the latest develop branch :

 $('#carousel').owlCarousel('destroy'); $('#carousel').owlCarousel({touchDrag: false, mouseDrag: false}); 

Or with direct access to the plugin:

 $('#carousel').data('owl.carousel').destroy(); $('#carousel').owlCarousel({touchDrag: false, mouseDrag: false}); 

Answer 3

This definitely works:

 if (container.hasClass("owl-carousel")) { container.owlCarousel({ touchDrag: false, mouseDrag: false }); container.data('owlCarousel').destroy(); container.removeClass('owl-carousel owl-loaded'); container.find('.owl-stage-outer').children().unwrap(); container.removeData(); } 

And the plugin itself:

 if (this.settings.responsive !== false) { window.clearTimeout(this.resizeTimer); $(window).off('resize.owl.carousel'); this.off(window, 'resize', this.e.onThrottledResize); } 

in Owl.prototype.destroy = function ()

Answer 4

I'm not sure you tried replacing?

According to the OwlCarousel documentation provided here http://www.owlcarousel.owlgraphic.com/docs/api-events.html , the trigger event is replace.owl.carousel ". You can implement it as follows:

 var $carousel = $('#carousel'); var owl = $carousel.data('owlCarousel'); owl.trigger('replace.owl.carousel', [{touchDrag: false, mouseDrag: false;}]); 

Hope this helps!

Answer 5

Now you can destroy it like this:

 var simple = $('#simple'); simple.owlCarousel(); // created simple.owlCarousel('destroy'); // destroyed