貓頭鷹旋轉木馬的.destroy（）刪除不相關的div

Question

我想根據視口的寬度在旋轉木馬視圖和不同的佈局之間切換。設置輪播工作正常。當我想刪除它時遇到問題。

我使用$owlTeam.destroy();根據文檔應該在傳送帶初始化之前重新創建標記的狀態，但由於某種原因刪除了兩個意外和關鍵的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 貓頭鷹版本：1.3.2 瀏覽器我測試：FF 35，鉻40

Answer 1

這是報告的bug： 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();