JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider">
        <a id="prev-button"></a><a id="next-button"></a>
        <div id="one">
            <h1>1</h1>
        </div>

        <div id="two">
         <h1> 2</h1>

        </div>

        <div id="three">
            
<h1>3</h1>



        </div>
        <div id="four">
           
<h1>4</h1>
        </div>



    </div>

CSS

div{outline:1px solid red;}
#slider{width:800px; height:800px; position:relative; display:block}
#slider div{  width:100%; height:100%; position:absolute; top:0; left:0; z-index:99;}
#one{background:#C30206;}
#two{background:#00880F;}
#three{background:#C75000;}
#four{background:#54009C;}
h1{position: relative; display:block; width:100px; height:100px; left:50%; top:50%; margin:-50px;  padding:0; font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:100px;}
#slider a{display:block; width:80px; height:100%; background:#C9C9C9; opacity:.9; position:absolute; top:0; z-index:100;}

#prev-button{left:0;}
#next-button{right:0;}

JavaScript

$("#slider > div:gt(0)").hide();

        // fade out current slide (first), fade in next slide and move first slide to end
        var nextSlide = function () {
            $("#slider > div:first")
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo("#slider");
        }

        var nextSlideTimer = setInterval(nextSlide, 5000);

        // fade out current slide (first) and move last slide to top and fade in
        $("#prev-button").click(function () {
            clearInterval(nextSlideTimer);

            $("#slider > div:first")
            .fadeOut(1000);
            $("#slider > div:last")
            .fadeIn(1000)
            .insertAfter("#slider > a#next-button");

            nextSlideTimer = setInterval(nextSlide, 5000)
            setTimeout(nextSlideTimer, 5000)
        });

        $("#next-button").click(function () {
            clearInterval(nextSlideTimer);

            $("#slider > div:first")
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo("#slider");

            nextSlideTimer = setInterval(nextSlide, 5000)
            setTimeout(nextSlideTimer, 5000)
        });