JSFiddle - React, Tailwind, and code Playground

by Alexis LĂłpez Espinoza

HTML

<img src = "http://www.fondosblackberry.com/user-content/uploads/wall/mid/32/Paisajes_manu_peru.JPG" />
<img src = "http://www.fondosblackberry.com/user-content/uploads/wall/mid/54/paisajes_de_peru.jpg" />
<img src = "http://www.fondosblackberry.com/user-content/uploads/wall/mid/6/Autumn_day_river.jpg" />

CSS

img{
    position: absolute;
    box-shadow: 0 .5em .5em;
    border: .1em lightgray solid;
    border-radius: .5em;
    transition: all ease .75s;
    top: 0;
    left: 0;
}

JavaScript

var img = document.getElementsByTagName("img"),
    total = img.length,
    i = 0,
    fn = function(){
        img[i].style.top = 0;
        img[i+1 == total ? 0 : i+1].style.left = 0;
        i = i == total - 1 ? 0 : ++i;
        img[i].style.top = "16.5em";
        img[i+1 == total ? 0 : i+1].style.left = "17.5em";
    };

img[i].style.top = "16.5em";
img[i+1].style.left = "17.5em";
setInterval(fn, 3000);