JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="outer">
    <div class="inner">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>        
    </div>
</div>
<br>
<div class="back">back</div>
<div class="next">next</div>

CSS

.outer {
    width: 500px;
    height: 350px;
    outline: 1px solid red;
    overflow: hidden;
}

.inner {
    width: 3500px;
}

.one, .two, .three {
    width: 500px;
    height: 350px;
    float: left;
}

.one {
    margin-left: -500px;
    background-color: red;
}

.two {
    background-color: green;
}

.three {
    background-color: blue;
}

JavaScript

$('.back').click(function(){
    $('.inner').animate({
        'margin-left': '+=500'
    }, 500);
});

$('.next').click(function(){
    $('.inner').animate({
        'margin-left': '-=500'
    }, 500);
});