JSFiddle - React, Tailwind, and code Playground

by danielcgold

HTML

<div id="slide-container">   
    <div id="slide-viewport">
         <div class="slide"></div>
         <div class="slide"></div>
    </div> 
    <a id="next">Next</a>
    <a id="prev">Previous</a>
</div>

CSS

#slide-container {  }
#slide-viewport { width: 600px; height: 200px; border: 1px solid #000; overflow: hidden; position: relative; }
.slide { width: 600px; height: 200px; position: absolute; }
.slide:nth-child(1) { background: yellow; left: 0; }
.slide:nth-child(2) { background: blue; left: 600px; }

JavaScript

$("#prev").css("opacity", "0");

$("#next").click(function() {
    $(".slide:nth-child(1)").animate({left:-600}, 500); 
    $(".slide:nth-child(2)").animate({left:0}, 500);
    $("#next").fadeTo("fast", 0, function() {
        $("#prev").fadeTo("fast", 1);
    });
});

$("#prev").click(function() {
    $(".slide:nth-child(2)").animate({left:600}, 500); 
    $(".slide:nth-child(1)").animate({left:0}, 500);
    $("#prev").fadeTo("fast", 0, function() {
        $("#next").fadeTo("fast", 1);
    });
});