Owl carousel 的 .destroy() 删除不相关的 div

Question

我想根据视口的宽度在轮播视图和不同的布局之间切换。设置轮播效果很好。当我想删除它时遇到了问题。

我$owlTeam.destroy();根据文档使用which 应该在初始化轮播之前重新创建标记的状态，但由于某种原因删除了两个意想不到的关键 div。一个是包装 div，它是包含轮播的 div 的父级，另一个是轮播 div 本身。

这是我的标记：

<section id="some-id" class="team">
  <div class="wrapper"> <!-- this gets removed on destroy -->
    <header><!-- content --></header>
    <div class="owlCarousel"> <!-- and this gets removed on destroy -->
      <article class="big"><!-- content contains another .wrapper --></article>
      <article class="big"><!-- content contains another .wrapper --></article>
      <article class="small"><!-- content --></article>
      <article class="small"><!-- content --></article>
      <!-- and some more articles -->
    </div>
  </div>
</section>

这是我使用的JS：

var $owlTeam;
if( $window.width() < 680 ) {
    $('.team .owlCarousel').owlCarousel({
        autoPlay: false
        , singleItem:true
        , transitionStyle : "fade"
        , pagination : true
    });
    $owlTeam = $('.team .owlCarousel').data('owlCarousel');
}

$window.resize(function() {
    if( $window.width() < 680 ) {
        $('.team .owlCarousel').owlCarousel({
            autoPlay: false
            , singleItem:true
            , transitionStyle : "fade"
            , pagination : true
        });
        $owlTeam = $('.team .owlCarousel').data('owlCarousel');
    } else {
        if( typeof $owlTeam != 'undefined' ) {
            $owlTeam.destroy();
        }
    }
});

我尝试使用 ID 直接选择应该包含轮播的 div，但这根本没有改变行为。我可以用 JS 重新插入丢失的标记，但这似乎更像是一个创可贴而不是一个合适的解决方案。

是什么导致了这种行为，我该如何解决？

jQuery 版本：1.11.1 owl 版本：1.3.2 我测试的浏览器：FF 35、Chrome 40

Answer 1

这是一个报告的错误：https : //github.com/smashingboxes/OwlCarousel2/issues/460

无论如何，您可以尝试使用此方法来破坏猫头鹰旋转木马：

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