JSFiddle - React, Tailwind, and code Playground

by Alexander Pankov

HTML

<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<p class="center">Different widths - Slide in center is not centered. How to make this work?</p>
<ul class="slider1">
    <li class="slide"><img src="http://placehold.it/140x130&text=FooBar1" /></li>
    <li class="slide"><img src="http://placehold.it/150x115&text=FooBar2"/></li>
    <li class="slide"><img src="http://placehold.it/130x160&text=FooBar3"/></li>
    <li class="slide"><img src="http://placehold.it/145x142&text=FooBar4"/></li>
</ul>

<p class="center">Same width - Slide in center is centered.</p>
<ul class="slider1">
    <li class="slide"><img src="http://placehold.it/140x130&text=FooBar1" /></li>
    <li class="slide"><img src="http://placehold.it/140x130&text=FooBar2"/></li>
    <li class="slide"><img src="http://placehold.it/140x130&text=FooBar3"/></li>
    <li class="slide"><img src="http://placehold.it/140x130&text=FooBar4"/></li>
</ul>

CSS

ul, li {
    padding: 0;
    margin: 0
}

li {
    list-style: none;
    width: auto !important;
}
.slide img {
    max-width: none;
    width: auto;
    height: 130px;
    max-height: 130px;
    border: 1px solid #000;
    display: block;
}

.center {
    text-align: center;
}

JavaScript

$(document).ready(function(){
  $('.slider1').bxSlider({
    slideWidth: 140,
    minSlides: 2,
    maxSlides: 3,
    moveSlides: 1,
    slideMargin: 10,
    pager: false,
    auto: false
  });
});