JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outerwrapper">
    <div class="innerwrapper">
        <div class="inner-slide">SLIDE 01</div>
        <div class="inner-slide">SLIDE 02</div>
        <div class="inner-slide">SLIDE 03</div>
        <div class="inner-slide">SLIDE 04</div>
        <div class="inner-slide">SLIDE 05</div>
        <div class="inner-slide">SLIDE 06</div>
        <div class="inner-slide">SLIDE 07</div>
    </div>
</div>

<div id="left">LEFT</div>
<div id="right">RIGHT</div>

CSS

.outerwrapper {
    position: absolute;
    left: 50%;
    height: 250px;
    width: 400px; margin-left: -225px;
    border: 1px solid black;
    overflow: hidden;
    padding-left: 50px;
}
.innerwrapper {
    height: 250px;
    width: 4000px;
}
.inner-slide {
    height: 250px;
    width: 350px;
    float: left;
}
.innerwrapper div:nth-child(odd) {
    background: silver;
}
.innerwrapper div:nth-child(even) {
    background: red;
}
#left, #right {
    position: absolute;
    cursor: pointer;
}
#left {
    left: 10px; bottom: 10px;
}
#right {
    right: 10px; bottom: 10px;
}

JavaScript

$(function () {

        var animating = false,
            outerwrap = $(".outerwrapper");

        $("#right, #left").click(function () {
            if (animating) {
                return;
            }
            var dir = (this.id === "right") ? '+=' : '-=',
                width = $(".inner-slide").width();
            animating = true;
            outerwrap.animate({
                scrollLeft: dir + width
            }, 600, function () {
                animating = false;
            });
        });

    });