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

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

为我工作：）

Answer 2

尝试检查visible owl carousel元素并在其上调用owlCarousel和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');
});

如何在摧毁猫头鹰滑块后“修复”它

2 个答案: