JSFiddle - React, Tailwind, and code Playground

by shryme

HTML

<div class="eight columns all slider">
    <img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" class="hide">
    <img src="http://images.medicaldaily.com/sites/medicaldaily.com/files/2013/08/04/0/62/6259.jpg" class="hide">
    <img src="http://animalia-life.com/data_images/wallpaper/bunny/bunny-01.jpg" class="hide">
</div>

CSS

.slider img{
    margin:15px;
    height: 95%;
    width:95%;
    border-radius:5px;    
    position: absolute;
}

.slider img.show{
    opacity:1;
    left: 0px;
    -webkit-transition:all 1.0s ease-in-out;
    -moz-transition:all 1.0s ease-in-out;
    -o-transition:all 1.0s ease-in-out;
    transition:all 1.0s ease-in-out;
    
}

.slider img.hide{
    left: -1000px;
    opacity: 0;
    -webkit-transition:all 1.0s ease-in-out;
    -moz-transition:all 1.0s ease-in-out;
    -o-transition:all 1.0s ease-in-out;
    transition:all 1.0s ease-in-out;
}

JavaScript

//setTimeout(slide1, 3000);

//GET ALL THE IMG !
var listPict = document.getElementsByClassName('slider')[0].children;

//This is the latest img, it will serve to know wich img to hide
var old = listPict.length - 1;
//This will represent the current img to show
var current = 0;

//The timeout will recall this function every 3 sec
function loop() {
    //We set the class of the current img to show
    listPict[current].setAttribute('class', 'show');
    //We hide the last img
    listPict[old].setAttribute('class', 'hide');
    
    //Update the variables !
    old = current;
    current++;
    
    //If the current is bigger then the list of images, return to 0
    if (current === listPict.length)
        current = 0;
    
    //Recall every 3 sec
    setTimeout(loop, 3000);
}

loop();