javascript - 摧毁我的猫头鹰 slider 后如何 'repair'

Question

我有一个产品页面，每个产品都有一个模态，每个模态都有一个猫头鹰 slider 。

当我第一次使用某个产品时，它显示得很好，但是当我关闭该产品并打开另一个产品时，猫头鹰 slider 就损坏了。

我尝试了(或者我感觉我尝试过)我在互联网上找到的所有解决方案，但仍然无法弄清楚。

这是我的 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

在 owl.carousel.js 的第 620 行更改此内容:

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

为我工作:)