JSFiddle - React, Tailwind, and code Playground

by richlewis14

HTML

<div id="rotator">
          <img src="http://growing-mist-5023.herokuapp.com/assets/banner2.jpg"  alt="">
          <img src="http://growing-mist-5023.herokuapp.com/assets/banner1.jpg" alt="" style="display:none;">
      </div><!--End of rotator-

CSS

#rotator {
    width:700px;
    height:auto;
    margin: 0 auto;
    margin-bottom:30px;
    padding:10px;
    background:url("silder_bg.jpg") no-repeat 0 0 transparent;
    -moz-box-shadow:    3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow:3px 3px 5px 6px #ccc;
}

#rotator img{
    height:280px;
    width:700px;
    border:2px solid white;
}

JavaScript

function rotateImages(whichHolder, start)  {
    var images = $('#' +whichHolder).find('img');
    if(images.length < 1) return;

    start = start || 0; // Allow not to specify 0 when first calling
    if (start >= images.length) start=0;

    images.css({display: 'none'});

    var thisImg = $('#' +whichHolder +' img').get(start);
    $(thisImg).css({display: 'block'});

    return start + 1;
}

var start = 1;

$(function(){

    window.setInterval(function() {

        start = rotateImages('rotator', start);

    }, 5000);   

});