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;
}
#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;
    opacity: 0;
    transition: opacity 300ms ease-in;
}
#slideshow-wrapper:hover > #slideshow-controller {
    opacity: 1;
}
#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 {
   ...

JavaScript

var i = 0;
var images = $('#slideshow-beta img'); // cache all images
var total = images.length;
var timeout;

/*** hide all images at the start ***/
images.each(function (index) {
    $(this).css({
        display: 'none'
    });
});

/*** bind event handlers to arrows ***/
$('.left-arrow').click(function () {
    SlideShow(-1);
});

$('.right-arrow').click(function () {
    SlideShow(1);
});

/*** Start the slideshow on 1st image ***/
SlideShow(0);


function SlideShow(x) {
    if (isNaN(x)) { // throw error if x is not a number
        throw new Error("x must be a number");
    }

    clearTimeout(timeout); // clear previous timeout if any to prevent multiple timeouts running
    
    var current = (total + i + x % total) % total; // get the current image index

    $(images[i]).fadeOut(1000, function () { // fade out the previous
        $(images[current]).fadeIn(1000); // fade in the current
    });

    i = current; // set i to be the current

    timeout = setTimeout(function () { // cache the timeout identifier so we can clean it
        SlideShow(1);
    }, 5000);

}