JSFiddle - React, Tailwind, and code Playground

by dipeshbeckham

HTML

<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<script src="http://bxslider.com/lib/plugins/jquery.easing.1.3.js"></script>
<ul class="bxslider">
    <li><img src="https://picsum.photos/200/300" /></li>
    <li><img src="https://picsum.photos/200/300" /></li>
    <li><img src="https://picsum.photos/200/300" /></li>
    <li><img src="https://picsum.photos/200/300" /></li>
    <li><img src="https://picsum.photos/200/300" /></li>
    <li><img src="https://picsum.photos/200/300" /></li>
</ul>

CSS

.bx-wrapper .bx-viewport {
    -moz-box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
    box-shadow: 0 0 5px #ccc;
    border: solid #fff 5px;
    left: -5px;
    background: #fff;
}

JavaScript

$('.bxslider').bxSlider({
infiniteLoop: true,
auto: true,
autoStart: true,
pause: 5000,
autoControls: false,
speed: 1500
});