JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slideshow">
    <div class="slideshow-element">Test 1</div>
    <div class="slideshow-element">Test 2</div>
    <div class="slideshow-element">Test 3</div>
    <div class="slideshow-element">Test 4</div>
</div>
<br />
<span id="prev">&lt;</span> <span id="next">&gt;</span>

CSS

.slideshow-element{
    position: absolute;
    display: none
}

#prev, #next {
    cursor: pointer;
}

JavaScript

$(function(){
    
    var $slideshow = $("#slideshow div:first").addClass("visible").fadeIn(2000);
    
    $("#prev").on("click", function()
	{
        var $visible = $("#slideshow .visible");
        var $prev = $visible.prev();
        
        if ($prev.length > 0)
        {
            $visible.removeClass("visible").fadeOut(2000, function() {
            	$prev.addClass("visible").fadeIn(2000);
            });
        }
    });
    
    $("#next").on("click", function()
	{
        var $visible = $("#slideshow .visible");
        var $next = $visible.next();
        
        if ($next.length > 0)
        {
            $visible.removeClass("visible").fadeOut(2000, function() {
            	$next.addClass("visible").fadeIn(2000);
            });
        }
    });
});