JSFiddle - React, Tailwind, and code Playground

by matt9388

HTML

<div id="div01" class="slide active">Slide One</div>
<div id="div02" class="slide">Slide Two</div>
<div id="div03" class="slide">Slide Three</div>
<div id="div04" class="slide">Slide Four</div>
<div class="btm-box">
    <button  id="prev" class="change-div">Prev</button>
    <button  id="next" class="change-div">Next</button>
</div>

CSS

.slide{
    display:none;
}
.active{
    display:block;
}

JavaScript

$(function(){
        var slides = $(".slide");
        $("#next").click(function(){
            var $active = $(".active");
            $active.removeClass("active");
            if($active.next(".slide").length > 0) 
                $active.next(".slide").addClass("active");
            else
                $(slides[0]).addClass("active");
        });
        $("#prev").click(function(){
            var $active = $(".active");
            $active.removeClass("active");
            if($active.prev(".slide").length > 0)
                $active.prev(".slide").addClass("active");
            else
                $(slides[slides.length -1]).addClass("active");
        }); 
    });