title: bx-slider is behaving unexpected when on 320px
body: <p>I have a carousel with 5 images of 240 by 300 pixels. When I resize my window to 320px and navigate to the 3 image. the images jump 3 positions and start from there. Meaning I see image 1, image 2, image3 jumping to image 1, image 2 and image 3, and when I move further he resets to the first image again.</p>
  
  <p>I happens both in Chrome and Firefox.
  Does anybody know why he behaves like this? Is it because the combination of settings?</p>
  
  <pre><code>&lt;div class="Carousel"&gt;
  &lt;ul auto="false" class="bxslider" marginslide="5" minslide="5" mode="horizontal" moveslide="0" navigation="true" pager="false" pause="4000" playstop="true" random="false" speed="500"&gt;
  &lt;li&gt;&lt;a href="/page1"&gt; &lt;img src="image1.jpg" title="title  "/&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="/page2"&gt;&lt;img src="image2.jpg" title="title2" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="/page3/14426"&gt;&lt;img src="image3.jpg" title="title3" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="/page4"&gt;&lt;img src="image4.jpg" title="title4" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;img src="image5.jpg" title="title5" /&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>BX-slider settings: <a href="http://bxslider.com/options" rel="nofollow">http://bxslider.com/options</a></p>
  
  <p>ps. Is a fiddle needed to help me?</p>