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

Question

我正在使用 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
  });

页面方向改变后，我想用新的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()