Question

猫头鹰滑块损坏后如何“修复”

2016-04-15

716

javascript jquery twitter-bootstrap owl-carousel

我有一个产品页面，每个产品都有一个模式，每个模式都有一个猫头鹰滑块。

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

我试过（或者我觉得我试过）我在网上找到的每一个解决方案，但我仍然搞不清楚。

这是我的 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');
});