15

我知道在 owl carousel 的第一个版本中，我们这样做：

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

好的，但是我们如何在第二个版本中做到这一点，我不知道他们是如何重命名的。

4

8 回答 8

21

由于某些原因$('#your_carousel').trigger('destroy.owl.carousel')无法正常工作。它不会删除重新初始化插件所需的所有类。

您需要完全移除它们才能破坏“猫头鹰旋转木马 2”。就像在 github 上的这个问题中描述的那样：https ://github.com/smashingboxes/OwlCarousel2/issues/460

要销毁 owl 函数，请使用：

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

这对我来说很完美：

// 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();
于 2015-03-21T08:53:00.743 回答
14

你可以这样做，destroy但你必须使用最新的develop分支：

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

或者直接访问插件：

$('#carousel').data('owl.carousel').destroy(); 
$('#carousel').owlCarousel({touchDrag: false, mouseDrag: false});
于 2014-08-17T10:51:51.367 回答
6

现在，您可以像这样销毁它：

var simple = $('#simple');
simple.owlCarousel(); // created
simple.owlCarousel('destroy'); // destroyed
于 2018-01-31T18:52:42.867 回答
4

这绝对有效：

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

和插件本身：

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

在 Owl.prototype.destroy = function()

于 2015-02-26T11:25:56.277 回答
2

我不确定，你试过更换吗？

根据此处列出的 OwlCarousel 文档http://www.owlcarousel.owlgraphic.com/docs/api-events.html，要触发的事件是“ replace.owl.carousel ”。您可以像这样实现它：

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

希望有帮助！

于 2014-08-17T01:13:06.147 回答
0

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

只需这样做以销毁 owl carousel，然后使用通用 init 函数重新初始化。

于 2020-03-05T12:32:38.417 回答
0

对于猫头鹰旋转木马 v2.3.4版本，

// 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
            }
        }
});

希望这会对某人有所帮助。谢谢。

于 2021-05-14T06:36:37.580 回答
0

如果使用 v1.3 我接下来

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

这对我有用。

于 2018-12-29T14:08:20.930 回答