How to reinit a owl carousel 2.0?

2019-03-26 07:19发布

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.

6条回答
我想做一个坏孩纸
2楼-- · 2019-03-26 07:57

Now, you can destroy it like that:

var simple = $('#simple');
simple.owlCarousel(); // created
simple.owlCarousel('destroy'); // destroyed
查看更多
Root(大扎)
3楼-- · 2019-03-26 08:00

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();
查看更多
混吃等死
4楼-- · 2019-03-26 08:03

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.

查看更多
甜甜的少女心
5楼-- · 2019-03-26 08:09

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});
查看更多
别忘想泡老子
6楼-- · 2019-03-26 08:11

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

查看更多
老娘就宠你
7楼-- · 2019-03-26 08:21

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!

查看更多
登录 后发表回答