JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slideshow">
        <img src="image1.jpg" class="active" />
        <img src="image2.jpg" />
        <img src="image3.jpg" />
        <img src="image4.jpg" />
    </div>
    <div class="nav">NEXT</div>
    <div class="nav">PREV</div>

CSS

#slideshow {position:relative; height:350px; opacity:1.0;}
    #slideshow IMG {position:absolute; top:0; left:0; z-index:8; opacity:0.0;}
    #slideshow IMG.active {z-index:10; opacity:1.0;}
    #slideshow IMG.last-active {z-index:9;}
    .nav {color:#0000ff; cursor:pointer;}

img {
    width:300px;
    height:250px;
    background:#ffaaaa;
}

img:nth-child(odd){
    background:#aaaaff;
}

JavaScript

$(function() {

   $('.nav').click(function() {
        var $active = $('#slideshow IMG.active');
        var $nav;
    
       if($(this).text() == 'PREV'){
            $nav = $active.prev();
           if($active.is(":first-child"))$nav = $("IMG:last-child");
       }
       else {
            $nav = $active.next();     
           if($active.is(":last-child"))$nav = $("IMG:first-child");
       }
        $active.addClass('last-active');
       console.log($nav);
        $nav.css({opacity: 0.0})
            .addClass('active')
            .stop(0,1)
            .animate({opacity: 1.0}, 1000, function() {
                $active.removeClass('active last-active');
            }); 

    }); 
    });