JSFiddle - React, Tailwind, and code Playground

by Cerlin ST

HTML

<div id="slideshow-wrapper">
    <div id="slideshow-beta">
        <img src="http://www.theresiliencyinstitute.net/wp-content/uploads/2013/09/TRI-Banner-background.jpg" class="img_" />
        <img src="http://www.theresiliencyinstitute.net/wp-content/uploads/2013/09/TRI-Banner-background.jpg" class="img_" />
        <img src="http://www.theresiliencyinstitute.net/wp-content/uploads/2013/09/TRI-Banner-background.jpg" class="img_" />
        <img src="http://www.theresiliencyinstitute.net/wp-content/uploads/2013/09/TRI-Banner-background.jpg" class="img_" />
        <img src="http://www.theresiliencyinstitute.net/wp-content/uploads/2013/09/TRI-Banner-background.jpg" class="img_" />
     </div>
    <div id="slideshow-controller">
        <div class="left-arrow-div">
            <span class="left-arrow"  onclick="SlideShow(-1);">Left</span>
        </div>
        <div class="right-arrow-div">
            <span class="right-arrow"  onclick="SlideShow(1);">Right</span>
        </div>
    </div>
</div>

JavaScript

var i=1;
var begin=true;
function SlideShow(x){
    if(x==-1){
        i--;
    }else if(x==1){
        i++;
    }
    var total=$('#slideshow-beta img').length;

        for(var j=1;j<=total;j++){
            if($('.img_'+j).css('display')!='none'){
                begin=false;
                break;
            }else{
                begin=true;
            }
        }

        if(i>total){
            i=1;
            $('.img_'+total).fadeOut(1000,function(){
                $('.img_'+i).fadeIn(1000);
            });
        }else if(begin){
            $('.img_'+i).show();

        }else if(!begin){

            $('.img_'+(i-1)).fadeOut(1000,function(){
                $('.img_'+i).fadeIn(1000);
            });
        }

        setTimeout(function(){
            i++;            
            SlideShow(x);
        },5000);

}
SlideShow(false);