JSFiddle - React, Tailwind, and code Playground

HTML

<div class="list">
     <div class="item">Eerste</div>
     <div class="item">Tweede</div>
     <div class="item">Derde</div>
     <div class="item">Vierde</div>
     <div class="item">Vijfde</div>
     <div class="item">Zesde</div>
     <div class="item">Zevende</div>
 </div>
<br>
 <button id="prev">Vorige</button> - <button id="next">Volgende</button>

CSS

.item{
    position:absolute;
}

JavaScript

$(document).ready(function(){
    $(".list div").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($(".list div:visible").next().length != 0){
            $(".list div:visible").stop().next().stop().fadeIn().prev().stop().fadeOut();
            
        } else {
            $(".list div:visible").fadeOut();
            $(".list div:first").fadeIn();
        }
        return false;
    });

    $("#prev").click(function(){
        if ($(".list div:visible").prev().length != 0){
            $(".list div:visible").prev().stop().fadeIn().next().stop().fadeOut();
        } else {
            $(".list div:visible").fadeOut();
            $(".list div:last").fadeIn();
        }
        return false;
    });
});