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">Back</span></div>
    <div class="right-arrow-div"><span class="right-arrow">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

jQuery(window).on('load', function() {
	$("#slideshow-wrapper").hover(function(){
       $(".left-arrow,.right-arrow").fadeIn();
    }, function(){
         $(".left-arrow,.right-arrow").fadeOut();
    });
	var i=1;
    var total = $('#slideshow-beta img').length;
	function SlideShow(x) {
        if(x === -1) {
            i--;
        } else if(x === 1) {
            i++;
        }

        if(i > total) {
            i = 1;
        }

        $('#slideshow-beta img').hide();
        $('#slideshow-beta .img_' + i).fadeIn(1000);
	}
    
    setInterval(function() {
        i++;
        SlideShow(i);
    }, 5000);
    
    jQuery('.left-arrow-div').on('click', function() {
        SlideShow(-1);
    });
    
    jQuery('.right-arrow-div').on('click', function() {
        SlideShow(1);
    });
    
	SlideShow(false);
});