JSFiddle - React, Tailwind, and code Playground

HTML

<div id="woot" style="margin-left:-8px;margin-top:77px;max-width:100%;max-height:200%;">
            <!--Photos go here!//-->
            <img id="1" src="http://www.guyzyl.org/files/1.jpg" />
            <img id="2" src="http://www.guyzyl.org/files/2.jpg" />
            <img id="3" src="http://www.guyzyl.org/files/3.jpg" />
            <img id="4" src="http://www.guyzyl.org/files/4.jpg" />
            <img id="5" src="http://www.guyzyl.org/files/5.jpg" />
            <img id="6" src="http://www.guyzyl.org/files/6.jpg" />
        </div>

CSS

img {
            max-height: 150%;
            max-width: 100%;
            height: auto;
            width: 100%;
            position:absolute;
        }

JavaScript

var i = 2;
var x = 1;
var index = 100;
$("#2").hide();
$("#3").hide();
$("#4").hide();
$("#5").hide();
$("#6").hide();

setInterval(function() {

    var selectorI = "#" + i;
    var selectorX = "#" + x;

    $(selectorX).hide("slide", {
        direction: "left"
    }, 1000);
    $(selectorI).show("slide", {
        direction: "right"
    }, 1000);

    x = i;
    i++;
    if (i === 7) {
        i = 1;
    }

}, 4800);