JSFiddle - React, Tailwind, and code Playground

by danielcgold

HTML

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

CSS

#slide-viewport { width: 600px; border: 1px solid #000; overflow: hidden; }
#slide-container { width: 1200px; height: 200px; 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

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

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