JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<div id="main">
    
    <div class="post" style="height:500px; background:green;"></div>
    <div class="post" style="height:100px; background:red;"></div>
    <div class="post" style="height:600px; background:blue;"></div>
    <div class="post" style="height:1000px; background:yellow;"></div>
    <div class="post" style="height:300px; background:purple;"></div>
    <div class="post" style="height:500px; background:orange;"></div>
    <div class="post" style="height:50px; background:teal;"></div>
    
</div>

<a href="#" class="left">Left</a>
<a href="#" class="right">Right</a>

CSS

body {
 padding: 0;
  margin: 0;  
}

.left {
position: absolute;
}
.right {
 margin-left: 50px;
    position: absolute;   
}

JavaScript

var posts = $("#main").find(".post").clone().css({width:$("body").width(),float:"left",display:"block"}),
    current_post = 0,
    wrapper = $("<div class='wrapper'></div>").css({width:parseFloat($("body").width())*posts.length,position:"absolute"});
$("#main").css({position:"absolute",overflow:"hidden",width:$("body").width(),height:posts.eq(current_post).height()}).children().remove();
wrapper.append(posts).appendTo($("#main"));


$(".left").bind("click", function(e){
  e.preventDefault();  
  current_post++;
    $("#main").find(".wrapper").animate({marginLeft:"-="+$("#main").width()}, 500);
    $("#main").animate({height:posts.eq(current_post).height()}, 500);
});

$(".right").bind("click", function(e){
  e.preventDefault();  
  current_post++;
    $("#main").find(".wrapper").animate({marginLeft:"+="+$("body").width()}, 500);
    $("#main").animate({height:posts.eq(current_post).height()}, 500);
});