title: Center aligning dynamic slides within carousel (BXSlider)
body: <p>I am struggling to get the slides to center align within the wrapper. My carousel can have a dynamic number of slides and therefore may not fill the width of the wrapper. They are aligned left by default but I need them center aligned. Can anyone help?</p>
  
  <p>I have created a JSFiddle to display my issue: <a href="http://jsfiddle.net/ysuf1u1p/2/" rel="nofollow noreferrer">http://jsfiddle.net/ysuf1u1p/2/</a></p>
  
  <pre><code>.bxslider-inner {
      display: inline-block;
      float:none !important;
      margin: 0 auto;
  }
  
  .bx-wrapper {
      max-width: 460px!important;
      text-align:center;
  }
  
  &lt;ul class="bxslider"&gt;
    &lt;li class="bxslider-inner"&gt;&lt;div style="width:80px; height:80px; background:#CCC; padding:5px;"&gt;1&lt;/div&gt;&lt;/li&gt;
   &lt;li class="bxslider-inner"&gt;&lt;div style="width:80px; height:80px; background:#F5F5F5; padding:5px;"&gt;2&lt;/div&gt;&lt;/li&gt;
      &lt;li class="bxslider-inner"&gt;&lt;div style="width:80px; height:80px; background:#F5F5F5; padding:5px;"&gt;3&lt;/div&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;script&gt;
  jQuery(document).ready(function(){
      jQuery('.bxslider').bxSlider({
      mode: 'horizontal',
      speed: 500,
      slideMargin:10,
      infiniteLoop: false,
      pager: false,
      controls: true,
      slideWidth: 80,
      minSlides: 1,
      maxSlides: 5,
      moveSlides: 1       
        });
      });
  
  &lt;/script&gt;
  </code></pre>