JSFiddle - React, Tailwind, and code Playground

by Jader Wagner

HTML

<button class="date-nav-prev">
    < Prev</button>
        <button class="date-nav-next">Next ></button>
        <div id="wrapper">
            <div id="slider">
                <div id="daysAgo2">Actions from 2 Days Ago</div>
                <div id="yesterday">Yesterday's Actions</div>
                <div id="today">Today's Actions</div>
            </div>
        </div>

CSS

#wrapper {
    width:300px;
    height:300px;
    border:1px solid #333;
    position:relative;
    overflow:hidden;
}
#slider {
    width: 1000px;
    height: 100%;
    position: absolute;
}
#slider div {
    width:300px;
    height:100%;
    float:left;
}
#today {
    background:green;
}
#yesterday {
    background:yellow;
}
#daysAgo2 {
    background:orange;
}

JavaScript

var sliderWidth = 300;
var slide = 1;
var slider = $('#slider');
var sliderCount = $('div', slider).length;
slider.width(sliderCount * sliderWidth);

$('.date-nav-prev').click(function () {
    if (slide > 1) {
        slide--;
        slider.animate({ left: '+=' + sliderWidth }, 500);
    }
});

$('.date-nav-next').click(function () {
    if (slide < sliderCount) {
        slide++;
        slider.animate({ left: '-=' + sliderWidth }, 500);
    }
});