我正在使用猫头鹰旋转木马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
...
})

在改变方向（或窗口宽度）后，它会破坏页面布局。http://jsfiddle.net/wgj7y86y/1/
有什么办法吗，怎么解决？