How to reinit a owl carousel 2.0?

Question

I know in the first version of 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.

What do you mean by *it*? BTW, did you check the docs of new version?? — T J, Aug 16 '14 at 14:32
@TJ Even when he did. The docs are outdated currently because I haven't the time to update them currently. — witrin, Aug 17 '14 at 10:46

score 22 · Answer 1 · answered Mar 21 '15 at 08:53

For some reasons $('#your_carousel').trigger('destroy.owl.carousel') is not working correctly. it does not remove all classes which are needed to reinit the plugin again.

You'll need to remove them completely to destroy the "owl carousel 2". like described here in this issue 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 perfect 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();

score 17 · Answer 2 · answered Aug 17 '14 at 10:51

17

You can do that with destroy but you have to use 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});

answered Aug 17 '14 at 10:51

witrin

3,701
1
24
49

Working fine for me. Thanks a lot. – Ashutosh Ojha Jun 13 '17 at 07:46

score 9 · Answer 3 · answered Jan 31 '18 at 18:52

9

Now, you can destroy it like that:

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

answered Jan 31 '18 at 18:52

Sergey Tyupaev

1,264
9
23

perfect !! works – Shurvir Mori Apr 15 '22 at 19:30

score 4 · Answer 4 · answered Feb 26 '15 at 11:25

This definitly 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()

score 2 · Answer 5 · answered Aug 17 '14 at 01:13

2

I am not sure, have you tried the replace?

As per the OwlCarousel documentation, listed here http://www.owlcarousel.owlgraphic.com/docs/api-events.html, the event to trigger is "replace.owl.carousel". You can implement it like this :

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

Hope that helps!

answered Aug 17 '14 at 01:13

Francis

21
4

The url is down but I found this one to be working: https://htmlpreview.github.io/?https://github.com/OwlFonk/OwlCarousel/blob/master/index.html also there's a function called owl.reinit(...) which might be of interest – xmoex Jan 12 '17 at 11:44
As of 2017-08-24 the other link doesn't work either. – Szczepan Hołyszewski Aug 24 '17 at 12:03
you have syntax problem – Mahdi mehrabi Jul 11 '20 at 06:32

score 0 · Answer 6 · answered Dec 29 '18 at 14:08

0

If use v1.3 I make next

$('#OwlWrapper').owlCarousel({option...});
$('#OwlWrapper').append('<div><img class="img-fluid" src="demo_files/images/1200x800/5-min.jpg" alt=""></div>');
$('#OwlWrapper').data('owlCarousel').reinit();

It's work for me.

answered Dec 29 '18 at 14:08

Galaxy IT

696
6
7

Welcome to Stack Overflow! You have answered a very old question. Please make sure your answer is relevant to the question and adds something that the other answers doesn't provide. You should see [how to write a good answer](https://stackoverflow.com/help/how-to-answer). – totokaka Dec 29 '18 at 14:39

score 0 · Answer 7 · answered Mar 05 '20 at 12:32

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

Just do this to destroy the owl carousel and then use the general init function to reinit.

score 0 · Answer 8 · answered May 14 '21 at 06:36

For Owl Carousel v2.3.4 version,

// Slider element.
let sliderElement = $('#msg-slider');

// Destroy first.
sliderElement.trigger('destroy.owl.carousel');

// Then empty whole owl div.
sliderElement.empty();

// Re-init owl slider.
sliderElement
    .owlCarousel({
        loop:true,
        margin:0,
        nav:false,
        dots:true,
        responsive:{
            0: {
                items: 1
            },
            600: {
                items:1
            },
            1000: {
                items:1
            }
        }
});

Hopefully, this will help someone. Thanks.

How to reinit a owl carousel 2.0?

8 Answers8

Linked