1

我正在为我的网站的移动版本使用 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/

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

4

1 回答 1

0

我不熟悉 OwlCarousel 2，但 jQuery 可以使用 .resize() 方法来做到这一点，该方法是 .on('resize', handler) 的快捷方式。它会监听浏览器大小的变化，然后触发一个函数来响应这个调整大小，这可以帮助你处理你所经历的布局的任何变化。

jQuery API 调整大小（）

于 2014-10-07T15:17:25.253 回答