JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<div class="container">
    <!-- You have to add the last div first, so that each div will get added after that...basically so that the div you wich to see first, is in first position -->
    <div id="left">left scroll</div>
    <div id="middle">left scroll</div>
    <div id="right">right scroll</div>
</div>
<br />
<div class="controls">
    <img class="left-button" src="arrow-right.png" alt="&lt;" />
    <img class="right-button" src="arrow-right.png" alt="&gt;" />
</div>

CSS

BODY {
    overflow: hidden;
    margin: 0px;
    padding: 0px;
}
.container {
    width: 1725px;
    display: table;
    margin: 0px;
    padding: 0px;
    height: 300px;
    position: absolute;
}
.controls {
    display: block;
    position: absolute;
    top: 22%;
    width: 100%;
}
.controls IMG {
    display: inline-block;
}
.left-button {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    height: 100px;
    margin-left: -1%;
    float: left;
}
.right-button {
    height: 100px;
    margin-right: -1%;
    float: right;
}
.container DIV {
    display: table-cell;
    margin: 0px 0px;
    width: auto;
    min-height: 300px;
    height: 300px;
    padding: 0px;
    text-align: left;
    padding: 4px 0px 4px 8px;
}
/* These are the individual divs which are scrolled through */
#left {
    background: red;
}
#right {
    background: blue;
    color: white;
}
#middle {
    background: green;
    color: white;
}

JavaScript

$(document).ready(function () {
    $('.right-button').click(function (e) {
        console.log("going right...");

        $(".container").animate({
            "left": "-214%"
        }, 950);

    });

    $(".left-button").click(function (e) {
        $(".container").animate({
            "left": "0"
        }, 950);

    });

    //End document ready function.		
});