OwlCarousel 2-页面方向更改后重新初始化

Question

我正在将OwlCarousel 2 beta用于我的网站的移动版本。显示的图像数量取决于屏幕宽度

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

页面方向更改后，我想用新值qua重新初始化owlCarousel。

已尝试

owl.trigger('destroy.owl');

然后

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

更改方向（或更改窗口宽度）后，将中断页面布局。这是JSFiddle：http://jsfiddle.net/wgj7y86y/1/

任何想法，如何解决？

Answer 1

我对OwlCarousel 2不熟悉，但是jQuery可以使用.resize（）方法来实现此功能，该方法是.on（'resize'，handler）的快捷方式。它将侦听浏览器大小的更改，然后响应该调整大小而触发功能，该功能可以帮助您处理所遇到的布局的任何更改。

jQuery API resize()

Answer 2

您是否尝试过在方向改变时重新初始化轮播？

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（）会破坏最初的选项，并使用新选项重新创建轮播，您甚至都不会注意到刷新。