OwlCarousel 2 - 页面方向变化

我使用OwlCarousel 2测试版，我的网站的移动版本后重新发起。屏幕宽度OwlCarousel 2 - 页面方向变化

var owl = $("#owl-demo"); 
    if (screen.availWidth < $(window).width()) { 
    var sWidth = screen.availWidth/300; 
    } else { 
    var sWidth = $(window).width()/300; 
    } 
    var qua = Math.floor(sWidth); 
    owl.owlCarousel({ 
    items : qua, 
    autoWidth: false, 
    autoHeight: false, 
    nav: true, 
    navText: ['<img src=\"/images/larrow.png\" width=\"24\">','<img src=\"/images/rarrow.png\" width=\"24\">'], 
    pagination: false 
    });

的showd图像的数量取决于页面方向变化我想重新初始化owlCarousel与QUA的新值之后。

试过

owl.trigger('destroy.owl');

然后

owl.owlCarousel({ 
     items : qua 
... 
})

后取向变化（或窗口宽度变化）它打破页面布局。这里的的jsfiddle：http://jsfiddle.net/wgj7y86y/1/

任何想法，如何解决这一问题？

来源

2014-10-07 George

我不熟悉OwlCarousel 2，但jQuery的可以使用.resize（）方法，它是一种快捷方式。对（“调整”，处理程序）做到这一点。它会监听浏览器大小的变化，然后触发一个函数来响应该大小，这可以帮助您处理对所体验布局的任何更改。

jQuery API resize()

来源

2014-10-07 15:17:25 sage88

调整大小工作正常。问题是猫头鹰传送带插件重新加载 – George 2014-10-07 15:19:26

@George显然这是一个已知的问题与猫头鹰旋转木马。在另一个线程中，这被建议作为工作代码。由于我不使用猫头鹰传送带，我会声称它对我有效，但它可能值得一看。 – sage88 2014-10-07 15:56:09

@George你也可以考虑查找最新版本的猫头鹰传送带，并使用它，似乎这个错误可能已经在更高版本中得到修复，但又是一种故障排除方法。 – sage88 2014-10-07 16:01:41

-1

您是否尝试过重新初始化上orientationchange旋转木马？

window.addEventListener('orientationchange', function() { 
    qua = /* your new data for the variable */ ; 
    $('#owl-demo').owlCarousel.reinit({ 
     items : qua, 
     autoWidth: false, 
     autoHeight: false, 
     nav: true, 
     navText: ['<img src=\"/images/larrow.png\" width=\"24\">','<img src=\"/images/rarrow.png\" width=\"24\">'], 
     pagination: false 
    }); 
});

有没有必要摧毁和重新创建它。只需将reinit（）与新选项一起使用，将会销毁最初的一个并使用新的选项重新创建轮播，而您甚至不会注意到刷新。

来源

2015-02-26 01:45:35

Owlcarousel 2似乎不具有重新发起功能然而，这种代码是Owlcarousel 1 – Demnogonis 2015-06-09 14:32:37

OwlCarousel 2 - 页面方向变化

回答

相关问题