title: OwlCarousel 2 - reinit after page orientation change
body: <p>I'm using OwlCarousel 2 beta for mobile version of my website. Quantity of showd images depends of screen width</p>
  
  <pre><code>var owl = $("#owl-demo");
    if (screen.availWidth &lt; $(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: ['&lt;img src=\"/images/larrow.png\" width=\"24\"&gt;','&lt;img src=\"/images/rarrow.png\" width=\"24\"&gt;'],
      pagination: false
    });
  </code></pre>
  
  <p>After page orientation change I want to reinit owlCarousel with new value of qua.</p>
  
  <p>Tried </p>
  
  <pre><code>owl.trigger('destroy.owl');
  </code></pre>
  
  <p>and then</p>
  
  <pre><code>owl.owlCarousel({
        items : qua
  ...
  })
  </code></pre>
  
  <p>After orientation change (or window width change) it breaks the page layout. Here's JSFiddle: <a href="http://jsfiddle.net/wgj7y86y/1/" rel="nofollow">http://jsfiddle.net/wgj7y86y/1/</a></p>
  
  <p>Any ideas, how to fix this?</p>