JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="slides">
                <div class="slides_container">
                    <img src="http://slidesjs.com/examples/standard/img/slide-1.jpg" width="960" height="392" alt="Slide 1" class="slide"  id="firstSlide">
                    <img src="http://slidesjs.com/examples/standard/img/slide-2.jpg" width="960" height="392" alt="Slide 2" class="slide" style="display:none;">
                    <img src="http://slidesjs.com/examples/standard/img/slide-3.jpg" width="960" height="392" alt="Slide 3" class="slide" style="display:none;">
                    <img src="http://slidesjs.com/examples/standard/img/slide-4.jpg" width="960" height="392" alt="Slide 4" class="slide" style="display:none;">
                    <img src="http://slidesjs.com/examples/standard/img/slide-5.jpg" width="960" height="392" alt="Slide 5" class="slide" style="display:none;">
                    <img src="http://slidesjs.com/examples/standard/img/slide-6.jpg" width="960" height="392" alt="Slide 6" class="slide" style="display:none;">
                </div>
                </div>

CSS

.slide{
    width:960px;
    height:392px;
    display:inline;
    float:left;
    
}

JavaScript

function slideShow() {
    var displayToggled = false;
    var current1 = $('.slide:visible');
    var nextSlide = current1.next('.slide');
    var hideoptions = {
        "direction": "left",
        "mode": "hide"
    };
    var showoptions = {
        "direction": "right",
        "mode": "show"
    };
    if (current1.is(':last-child')) {
        current1.effect("slide", hideoptions, 1000);
        $("#firstSlide").effect("slide", showoptions, 1000);
    }
    else {
        current1.effect("slide", hideoptions, 1000);
        nextSlide.effect("slide", showoptions, 1000);
    }
};
setInterval(slideShow, 3000);
slideShow();