JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://htmldoc.net/examples/jquery.bxSlider.min.js"></script>
<div class="slideshow">
    <ul id="slider">
        <li>
            <img src="http://lorempixel.com/200/200/sports" />
        </li>
        <li>
            <img src="http://lorempixel.com/200/200/city" />
        </li>
        <li>
            <img src="http://lorempixel.com/200/200/fashion" />
        </li>
        <li>
            <img src="http://lorempixel.com/200/200/nature" />
        </li>
        <li>
            <img src="http://lorempixel.com/200/200/transport" />
        </li>
    </ul>
</div>

CSS

.slideshow {
		    position: relative;
		    overflow: hidden;
		    height: 200px;
		}
		.slideshow ul {
		    overflow: hidden;
		    list-style-type: none;
		    margin: 0;
		    padding: 0;
		}
		.slideshow li {
		    width: 200px;
		    height: 200px;
		}

JavaScript

$(document).ready(function () {
    $('#slider').bxSlider({
        auto: true,
        pause: 2000,
        autoHover: true,
        controls: false,
        displaySlideQty: 3,
        moveSlideQty: 1,
        onAfterSlide: function (currentSlide, totalSlides, currentSlideHtmlObject) {
            var $middleSlide = currentSlide + 2;
            $('#slider li').css({
                opacity: 0.2
            });
            $('#slider li:eq(' + $middleSlide + ')').animate({
                opacity: 1
            }, 100);
        }
    });

});