JSFiddle - React, Tailwind, and code Playground

by Nikhil krishnan

HTML

<input type="submit" disabled="disabled" value="Previous" id="prev_btn" />
<input type="submit" value="NEXT" id="next_btn" />
<div id="main">
    <div class="first current" id="1">slide 1</div>
    <div id="2">slide 2</div>
    <div id="3">slide 3</div>
    <div id="4" class="last">slide 4</div>    
</div>

CSS

#main{position:relative;}
#main div{display:none;color:red; background:#333;padding:20px 0;text-align:center;margin:10px 0;position:absolute;left:0;right:0;width:100%;}
#main div.current{display:block;}
input{text-transform:uppercase;}

JavaScript

$("#next_btn").click(function (e) {
    $(".current").removeClass("current").fadeOut(500)
    .next().fadeIn(500).addClass("current");
    if ($(".current").hasClass("last")){
        $("#next_btn").attr('disabled', true);
    }
    $("#prev_btn").attr('disabled', null);
});
$("#prev_btn").click(function (e) {
    $(".current").removeClass("current").fadeOut(500)
    .prev().fadeIn(500).addClass("current");
    if ($(".current").hasClass("first")){
        $("#prev_btn").attr('disabled', true);
    }
    $("#next_btn").attr('disabled', null);
});