JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
    <div id="prev"></div> 
    
    <div id="center-photo"> 
        <img src="http://dubcanada.net/play/ex1/images/photo.jpg" width="246" height="341" alt="photo" id="img1" class="active" /> 
        <img src="http://dubcanada.net/play/ex1/images/photo2.jpg" width="246" height="341" alt="photo" id="img2" /> 
    </div> 
    
    <div id="next"></div>
</body>
</html>

CSS

body { font-family: Verdana; }

.clear { clear: both; }

#background {
    width: 100%; 
    height: 100%; 
    left: 0px; 
    top: 0px; 
    position: fixed;
    z-index: -1;
}

.stretch {
    width:100%;
    height:100%;
}


#home{ float: right; margin: 10px; right: 50px; position: relative; }
.home{ color:#ed6622; font-size: 28px; text-decoration:none; border-left: 1px solid #b49698; border-right: 1px solid #b49698; padding: 2px 10px 2px 10px; }
.home-t { text-decoration:none; }


/* MAIN SITE */
#menu { width: 966px; margin: 0 auto; }
#menu ul { width: 966px; }
#menu ul li { display: inline; float: left; }
#menu ul li a { display: block; }

.access { background:url(http://dubcanada.net/play/ex1/images/access.gif) no-repeat; width: 240px; height: 58px; text-indent: -99999px; display: block; }
.access:hover { background:url(http://dubcanada.net/play/ex1/images/access-over.gif) no-repeat; width: 240px; height: 58px; text-indent: -99999px; display: block; }

.upload { background:url(http://dubcanada.net/play/ex1/images/upload.gif) no-repeat; width: 240px; height: 58px; text-indent: -99999px; display: block; }
.upload:hover { background:url(http://dubcanada.net/play/ex1/images/upload-over.gif) no-repeat; width: 240px; height: 58px; text-indent: -99999px; display: block; }

.collage { background:url(http://dubcanada.net/play/images/collage.gif) no-repeat; width: 242px; height: 58px; text-indent: -99999px; display: block; }
.collage:hover { background:url(http://dubcanada.net/play/ex1/images/collage-over.gif) no-repeat; width: 242px; height: 58px; text-indent: -99999px; display: block; }

.download { background:url(http://dubcanada.net/play/images/download.gif) no-repeat; width: 244px; height: 58px; text-indent: -99999px; display: block; }
.download:hover { background:url(http://dubcanada.net/play/ex1/images/download-over.gif) no-repeat; width: 244px; height: 58px; text-indent: -99999px; display: block; }

#popchips { position: absolute; top: 80px; left: 50px;...

JavaScript

$('#center-photo img:first').show();
    var imglist = $("#center-photo img");
    
    $('#next').click(function() {
        var active = $('#center-photo img:first');
        var next = active.next();
        var pos = $('#img1').position();
        next.css('left', "250px");
        //Move current image out
        active
        .animate(
        { left: pos.left-250 + "px", opacity: 'hide' }, {
             duration: 'slow',
        });
        
        // Display next one and move in
        
        next
        .animate(
        { left: pos.left-250 + "px", opacity: 'show' }, {
             duration: 'slow',
        });
    });