JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div id="next">Next</div>
    <div class="slideshow">
    <img src="http://dummyimage.com/400x260/000/fff.png&text=Image+01" />
    <img src="http://dummyimage.com/400x260/000/fff.png&text=Image+02" />
    <img src="http://dummyimage.com/400x260/000/fff.png&text=Image+03" />
    <img src="http://dummyimage.com/400x260/000/fff.png&text=Image+04" />
    <img src="http://dummyimage.com/400x260/000/fff.png&text=Image+05" />
    </div>
</div>

CSS

.slideshow, .container {
    overflow: hidden;
    width: 400px;
    height: 260px;
    background-color: #000;
    margin: 10px;
    position: relative;
}
.slideshow {
    right: 0px;
}
.slideshow img {
    width: 600;
    height: 400;
}
#next {
    position: absolute;
    z-index: 10;
    right: 10px;
    top: 10px;
    color: #FFF;
    cursor: pointer;
}

JavaScript

var count = 1;

$("#next").click(function(){
    count = ($(".slideshow :nth-child("+count+")").fadeOut().next().length == 0) ? 1 : count+1;
    $(".slideshow :nth-child("+count+")").fadeIn();    
});