JSFiddle - React, Tailwind, and code Playground

by naveenksh

HTML

<div id="slideshow">
    <img class="slide" src="http://goo.gl/UohAz" width="128px" height="128px">
    <img class="slide" src="http://goo.gl/UohAz" width="128px" height="128px">
    <img class="slide" src="http://goo.gl/UohAz" width="128px" height="128px">
    <img class="slide" src="http://goo.gl/UohAz" width="128px" height="128px">
    <img class="slide" src="http://goo.gl/UohAz" width="128px" height="128px">
</div>

CSS

img.slide {
    position: absolute;
    left:0;
    top:0;
}

#slideshow {
    position:relative;
    overflow:hidden;
    width:400px;
    height:400px;
}

JavaScript

// Slideshow
// Global variables
var numslides=0;
var currentslide=0,oldslide=4;
var x = 0;
var slides = new Array();
function MakeSlideShow() {
    imgs=document.getElementsByTagName("img");
    for (i=0; i<imgs.length; i++) {
        if (imgs[i].className != "slide") continue;
        slides[numslides]=imgs[i];
        //Stack images with the first slide on top
        if (numslides==0) {
            imgs[i].style.zIndex=10;
        }
        else {
            imgs[i].style.zIndex=0;
        }
        imgs[i].onclick=NextSlide;
        numslides++;
    } // end for loop
}// end MakeSlideShow

function NextSlide() {
    //Set the current slide to be under the new top slide
    slides[currentslide].style.zIndex=9;
    // Move older slide to the bottom of the stack
    slides[oldslide].style.zIndex=0;
    oldslide = currentslide;
    currentslide++;
    if (currentslide >= numslides) currentslide = 0;
    // Start at the right edge
    slides[currentslide].style.left=400+"px";
    x=400;
    //Move the new slide to the top
    slides[currentslide].style.zIndex=10;
    AnimateSlide();
}

function AnimateSlide() {
    // Lower moves slower, higher moves faster
    x = x - 25;
    slides[currentslide].style.left=x+"px";
    //Previous image moves off the left edge
    slides[oldslide].style.left=(x-400)+"px";
    //Repeat until until the slide is at the zero position
    if (x > 0) window.setTimeout(AnimateSlide,10);
}
document.onload={}