JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://bxslider.com/lib/plugins/jquery.easing.1.3.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<ul class="bxslider" >
    <li> <img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-20.jpg" height="200px"/></li>
    <li> <img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-42.jpg" height="200px"/></li>
    <li><img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-54.jpg" height="200px"/></li>
    <li><img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-01.jpg" height="200px"/></li>
    <li>  <img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-20.jpg" height="200px"/></li>
    <li>                                        <img src="http://img-store.mypracticalskills.com/color-library/rgb-ext-42.jpg" height="200px" /></li>
</ul>

<ul class="bxslider1">
    <li><img src="http://bxslider.com/images/730_200/hill_trees.jpg" /></li>
    <li><img src="http://bxslider.com/images/730_200/me_trees.jpg" /></li>
    <li><img src="http://bxslider.com/images/730_200/houses.jpg" /></li>
    <li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
    <li><img src="http://bxslider.com/images/730_200/hill_fence.jpg" /></li>
    <li><img src="http://bxslider.com/images/730_200/trees.jpg" /></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

var slider = $('.bxslider').bxSlider({
    onSlideNext: doThis,
    onSlidePrev: doThis
});
var slider1 = $('.bxslider1').bxSlider({
    onSlideNext: doThis,
    onSlidePrev: doThis
});

function doThis(ele, old, newi){
    slider.goToSlide(newi);
    slider1.goToSlide(newi);
}