JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slideshow">
    <img src="http://www.cypress.com/fckImages/EZ-Host_Block_Diagram.png">
    <img src="http://www.cypress.com/fckImages/Host_Graphics.png">
    <img src="http://twilightseriestheories.com/wp-content/uploads/2014/02/twilight-forever-complete-box-set-900x548.jpg">
</div>
<div id="previous">previous</div>
<div id="next">Next</div>

CSS

#slideshow {
    width: 700px;
    height: 400px;
    position: relative;
    overflow: hidden;
}

#slideshow img {
    position: absolute; 
}

JavaScript

$(document).ready(function() {
    $('#slideshow img:gt(0)').hide();
    
    $('#previous').click(function() {
        $('#slideshow img:first').fadeOut(1000);
        $('#slideshow img:last').fadeIn(1000).prependTo('#slideshow');
    });
    
    $('#next').click(function() {
        $('#slideshow img:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
    });
});