JSFiddle - React, Tailwind, and code Playground

by Alexander Pankov

HTML

<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<div class="slider-place">
    <ul class="my-slider">
        <li style="background-image:url('http://www.krasfun.ru/images/2011/3/36880_0_5396b_ed1a23ca_XXL');"></li>
        <li style="background-image:url('http://static.ow.ly/photos/original/1y851.jpg');"></li>
        <li style="background-image:url('http://im3-tub-ru.yandex.net/i?id=16519518598fe6ccc9b39fb1b85a76c5-89-144&n=21');"></li>
    </ul>
</div>

CSS

.slider-place {
    width:600px;
    height:300px;
}

.my-slider {
    width:600px;
    height:300px;
}

.my-slider li {
    width:100%;
    height:100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

JavaScript

$('.my-slider').bxSlider();