JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<div id="slideshow-wrapper">
<div id="slideshow-beta">    
    <img class="img_1" src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Apps-HTML-5-icon.png">
    
   <img class="img_2" src="http://www.endivesoftware.com/wp-content/uploads/2015/08/1-4fac83467069c.png">
        
   <img class="img_3" src="http://www.pinyourclient.com/wp-content/uploads/2015/01/9455413519_javascript.png">
</div>
       
<div id="slideshow-controller">	
    <div class="left-arrow-div"><span class="left-arrow" onclick="SlideShow(-1);">Back</span></div>
    <div class="right-arrow-div"><span class="right-arrow" onclick="SlideShow(1);">Forward</span></div>
</div>
       
</div>

CSS

.left-arrow-div{
	width: 10%;
	height: 100%;
	text-align: center;
	font-size: 3vw;	
	float: left;
}
.right-arrow-div{
	width: 10%;
	height: 100%;
	text-align: center;
	font-size: 3vw;
	float: right;	
}
.left-arrow{
	color: #2d343e;
	opacity: 0.7;
	position: relative;
	top: 50%;
}
.right-arrow{
	color: #2d343e;
	opacity: 0.7;
	position: relative;
	top: 50%;
}
.left-arrow:hover{
	opacity: 1;
}

.right-arrow:hover{
	opacity: 1;
}
.left-arrow,.right-arrow{
	cursor: pointer;
	display: none;
}
#slideshow-wrapper{
	position: relative;
	width: 99%;
	height: 40vw;
	max-height: 40vw;
	margin-top: 6vw;
}
#slideshow-beta,#slideshow-controller{
	width: 100%;
	height: 100%;
	top: 0;
  	left: 0;
}
#slideshow-controller{
	z-index: 2;
	position: absolute;
}
#slideshow-beta{
	z-index: 1;
	position: absolute;		
	overflow: hidden;
background: rgb(167,207,223); 
background: -moz-linear-gradient(top,  rgba(167,207,223,1) 0%, rgba(35,83,138,1) 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(167,207,223,1)), color-stop(100%,rgba(35,83,138,1))); 
background: -webkit-linear-gradient(top,  rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); 
background: -o-linear-gradient(top,  rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); 
background: -ms-linear-gradient(top,  rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%); 
background: linear-gradient(to bottom,  rgba(167,207,223,1) 0%,rgba(35,83,138,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); 
}
#slideshow-beta img{
	margin-top: -5vw;
	max-width: 100%;
	min-width: 100%;
	height: auto;
	display: none;
}


.slideshow-controller {
    
    background-color:red
}
}

JavaScript

$("#slideshow-wrapper").hover(function(){
       $(".left-arrow,.right-arrow").fadeIn();
    }, function(){
         $(".left-arrow,.right-arrow").fadeOut();
    });
var i=1;
var begin=true;
SlideShow = function (x) {
	if(x==false){
		
	}else 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);