title: bxslider showing empty space when in infinite loop
body: <p>I have added a bxslider in my project this way:
  jquery:</p>
  
  <pre><code>$(document).ready(function () {
          $('.bxslider').bxSlider({
              minSlides: 2,
              maxSlides: 3,
              slideWidth: 340,
              moveSlides: 1,
              slideMargin: 0,
              infiniteLoop: true
          });
  </code></pre>
  
  <p>HTML Part:</p>
  
  <pre><code>&lt;div style="width:100%;float: left; position: relative; bottom: 17px;"&gt;
      &lt;ul class="bxslider" id="slider1" &gt;
          &lt;li style="float: left; list-style: none outside none;width:340px !important;"&gt;
  &lt;img src="/Content/images/home.png" alt="home" width="340"height="239" /&gt;
  &lt;/li&gt;
  &lt;li style="float: left; list-style: none outside none;width:340px !important;"&gt;
  &lt;img src="/Content/images/home1.png" alt="home1" width="340"height="239" /&gt;
  &lt;/li&gt;
  &lt;li style="float: left; list-style: none outside none;width:340px !important;"&gt;
  &lt;img src="/Content/images/home2.png" alt="home2" width="340"height="239" /&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As we click on the next button, we see the images moving in the slider 1 by 1. When all the images of the slider get finished, it starts rotating again from the first image - in this case we see a small "empty area" and after that the first image. We want a smooth loop to work circularly without any empty space seen. </p>
  
  <p>The link of the above problem mentioned is </p>
  
  <p><a href="http://neelamsharma.s3.amazonaws.com/simplehtml/testing/testing.html" rel="nofollow">http://neelamsharma.s3.amazonaws.com/simplehtml/testing/testing.html</a></p>
  
  <p>Can anyone tell me the solution of this ?It will be greatly appreciable</p>
  
  <p>Thank you for help in advance!</p>