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()

Answer 2

您是否尝试在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（）将破坏初始的并重新创建一个新的旋转木马，你甚至不会注意到刷新。

Owl Carousel 2 - 在页面方向更改后重新启动

2 个答案: