title: bxslider calculating wrong viewport size on load
body: <p>Anyway I recently started using bxslider and I'm having an issue with it. </p>
  
  <p>It seems to calculate its viewport size wrongly on page load, which means it doesn't work well on mobile devices, tablets etc.</p>
  
  <p>The weird thing is, when I resize the window of the browser(even just for a pixel) the viewport height gets calculated correctly and everything looks fine. But if I refreshed the page with same height and width bx-viewport wouldn't be correctly calculated.</p>
  
  <p>Any idea why this is happening?</p>
  
  <p>HTML looks something like this(and yeah I'm aware that it probably hasn't got anything to do with it, but still):</p>
  
  <pre><code>&lt;ul class="seminars-slider"&gt;
      &lt;li&gt;
          &lt;article class="education-article"&gt;
              &lt;h3&gt;&lt;a href="#"&gt; Sit tincidunt eros massa, lundium ultrices, sit in aliquet velit&lt;/a&gt;&lt;/h3&gt;
              &lt;p&gt;LOL1&lt;/p&gt;
              &lt;div class="buttons"&gt;
                  &lt;a href="#" class="book-button"&gt;&lt;span&gt;Book now&lt;/span&gt;&lt;/a&gt;
                  &lt;a href="#" class="read-more"&gt;&lt;span&gt;Read more&lt;/span&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="clearall"&gt;&lt;/div&gt;
  
          &lt;/article&gt;
      &lt;div class="clearall"&gt;&lt;/div&gt;
      &lt;/li&gt;
  
      // same li
      &lt;li&gt;
          &lt;article class="education-article"&gt;
              &lt;h3&gt;&lt;a href="#"&gt; Sit tincidunt eros massa, lundium ultrices, sit in aliquet velit&lt;/a&gt;&lt;/h3&gt;
              &lt;p&gt;LOL1&lt;/p&gt;
              &lt;div class="buttons"&gt;
                  &lt;a href="#" class="book-button"&gt;&lt;span&gt;Book now&lt;/span&gt;&lt;/a&gt;
                  &lt;a href="#" class="read-more"&gt;&lt;span&gt;Read more&lt;/span&gt;&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="clearall"&gt;&lt;/div&gt;
  
          &lt;/article&gt;
      &lt;div class="clearall"&gt;&lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;          
  </code></pre>
  
  <p>js call looks like:</p>
  
  <pre><code>slider=jQuery('.seminars-slider').bxSlider({
      mode: 'vertical',
      controls:false,
      pager:false,
      minSlides:2,
      maxSlides:2,
      moveSlides:1
  });
  
  jQuery('.up-control').click(function() {
      slider.goToNextSlide();
  });
  jQuery('.down-control').click(function() {
      slider.goToPrevSlide();
  });
  </code></pre>
  
  <p>Thanks.</p>