title: Horizontally centering the active image of a bxSlider carousel with a seamless loop?
body: <p>I want to make a really simple seamlessly-looping carousel and have tried using bxSlider, but am encountering an issue where my images are off-center.</p>
  
  <p>I have 3 x 1000px wide images and all I want to do is ensure the active image is in the middle of the browser, with the other two images infinitely looping on the left/right sides, like so:</p>
  
  <p><img src="https://i.stack.imgur.com/Qqbr6.png" alt="enter image description here"></p>
  
  <p>I've tried using a negative-margins trick (<code>left: 50%</code> and <code>margin-left: -500px</code>) but it didn't work and bxSlider went kind of crazy.</p>
  
  <p>My code is very simple and I have a fiddle here: <a href="http://jsfiddle.net/j3hgA/" rel="noreferrer">http://jsfiddle.net/j3hgA/</a></p>
  
  <pre><code>&lt;ul class="bxslider"&gt;
      &lt;li&gt;&lt;img src="http://i.imgur.com/pOh3bXm.jpg" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://i.imgur.com/VrvQUzu.jpg" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://i.imgur.com/pJr77Ee.jpg" /&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Is there a better way to do this?</p>