如何在銷燬後修復我的貓頭鷹滑塊

Question

我有一個產品頁面，每個產品都是模態，而且每個模態都是貓頭鷹滑塊。

當我第一次使用產品時，它顯示效果很好，但是當我關閉該產品並打開另一個產品時，貓頭鷹滑塊已損壞。

我試過了（或者我覺得我試過了）我在互聯網上找到的每個解決方案，但仍然無法弄清楚。

這裏是我的jQuery：

var owlCarousel = $('.owl-carousel'); 
$('.modal').on('shown.bs.modal', function (event) { 
    owlCarousel.owlCarousel({ 
    loop: true, 
    items: 1, 
    margin: 100 
    }); 
}); 

$('.modal').on('hidden.bs.modal', function (event) { 
    $('.owl-carousel').trigger('destroy.owl.carousel'); 
}); 

我希望我解釋我的問題很好！

注：當我打開第二個產品這一錯誤表明了每一秒我等

TypeError: null is not an object (evaluating 'this.e._checkVisibile') 

Answer 1

嘗試檢查的visible貓頭鷹轉盤元素，並呼籲它​​和destroy事件。

var owlCarousel; 
$('.modal').on('shown.bs.modal', function (event) { 
    owlCarousel = $('.owl-carousel:visible'); 
    owlCarousel.owlCarousel({ 
    loop: true, 
    items: 1, 
    margin: 100 
    }); 
}); 
$('.modal').on('hidden.bs.modal', function (event) { 
    owlCarousel.trigger('destroy.owl.carousel'); 
}); 

Answer 2

線620 owl.carousel.js更改此：

Owl.prototype.onThrottledResize = function() { 
    window.clearTimeout(this.resizeTimer); 
    this.resizeTimer = window.setTimeout(this.e._onResize, this.settings.responsiveRefreshRate); 
}; 

這樣：

Owl.prototype.onThrottledResize = function() { 
    if(this.e !=null) { 
     window.clearTimeout(this.resizeTimer); 
     this.resizeTimer = window.setTimeout(this.e._onResize, this.settings.responsiveRefreshRate); 
    } 
}; 

爲我工作:)