JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://gridmedia-blogger-templates.googlecode.com/files/jquery.bxSlider.min.js"></script>
<ul class="bxslider">
    <li>
        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRg1wNXVSwgfZTqJdk7GhF01GeAPU_ylodByMA2JaUQ-J07vxGDBw" alt="" />
    </li>
    <li>
        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRg1wNXVSwgfZTqJdk7GhF01GeAPU_ylodByMA2JaUQ-J07vxGDBw" alt="" />
    </li>
    <li>
        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRg1wNXVSwgfZTqJdk7GhF01GeAPU_ylodByMA2JaUQ-J07vxGDBw" alt="" />
    </li>
</ul>
<div class="box"></div>

CSS

.bxslider {
    width:100%
}
.bxslider li {
    width:100%
}
.bxslider li img {
    max-width:100%;
    width:100%
}
#selected {
    width:100%;
    text-align:center;
    float:left;
    text-decoration:none;
}
.box {width:200px; height:200px;}
	.0-bluebg {background:#189EDF}
	.orangebg {background:#FF7C23}

JavaScript

$('.bxslider').bxSlider({
    auto: true,
    infiniteLoop: false,
    hideControlOnEnd: true,
    onAfterSlide: function (currentSlide) {
         if(currentSlide == 0) {
             $( ".box" ).css("background-color", "orange", 1000);
        } 
        
       if(currentSlide == 1) {
             $( ".box" ).css("background-color", "yellow", 1000);
        } 
        if(currentSlide == 2) {
             $( ".box" ).css("background-color", "red", 1000);
        } 
    }
});

$(document).ready(function () {

});