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

Posted 2023-05-07

【中文标题】OwlCarousel 2 - 页面方向更改后重新初始化

【英文标题】：OwlCarousel 2 - reinit after page orientation change

【发布时间】：2014-12-02 01:49:36

【问题描述】：

我正在使用 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/

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

【参考方案1】：

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

jQuery API resize()

【讨论】：

调整大小工作正常。问题在于 owl-carousel 插件重新加载

@George 显然这是 owl-carousel 的一个已知问题。在另一个线程中，这被建议作为解决方法的代码。由于我不使用 owl-carousel 我会声称它对我有用，但它可能值得一看。

@George 您也可以考虑查找 owl-carousel 的最新版本并使用它，看来此错误可能已在以后的版本中修复，但又只是另一种故障排除方法。跨度>

唯一的解决方案 - 它的页面重新加载：（也许在下一个版本中这个错误将被修复......