Center aligning dynamic slides within carousel (BXSlider)

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?

I have created a JSFiddle to display my issue: http://jsfiddle.net/ysuf1u1p/2/

.bxslider-inner {
    display: inline-block;
    float:none !important;
    margin: 0 auto;
}

.bx-wrapper {
    max-width: 460px!important;
    text-align:center;
}

<ul class="bxslider">
  <li class="bxslider-inner"><div style="width:80px; height:80px; background:#CCC; padding:5px;">1</div></li>
 <li class="bxslider-inner"><div style="width:80px; height:80px; background:#F5F5F5; padding:5px;">2</div></li>
    <li class="bxslider-inner"><div style="width:80px; height:80px; background:#F5F5F5; padding:5px;">3</div></li>
</ul>

<script>
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       
      });
    });

</script>

Copyright Notice：Content Author:「LeeTee」，Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/41763448/center-aligning-dynamic-slides-within-carousel-bxslider