JSFiddle - React, Tailwind, and code Playground

HTML

<div id="viewbox">
    <button class="button" id="links"><</button>
    <button class="button" id="rechts">></button>
    <div id="slider">
        <div class="block orange">4</div>
        <div class="block rot">1</div>
        <div class="block blau">2</div>
        <div class="block gelb">3</div>
        <div class="block orange">4</div>
        <div class="block rot">1</div>
    </div>
</div>

CSS

body {
    background:#404040;
}
#slider {
    width:600%;
    height:300px;
    margin-left:-405px;
    padding-left:5px;
}
#viewbox {
    width:400px;
    height:300px;
    box-shadow:rgba(0, 0, 0, 0.5)0px 0px 25px;
    margin:auto;
    overflow:hidden;
    position:relative;
}
.block {
    width:400px;
    height:300px;
    float:left;
    font-family:century gothic;
    color:#fff;
    font-size:50px;
    line-height:300px;
    text-align:center;
    text-shadow:#000 0px 0px 3px;
}
.rot {
    background:#c33;
}
.blau {
    background:#00bfff
}
.gelb {
    background:#ff0;
}
.orange {
    background:#ff8000;
}
.button {
    width:30px;
    height:30px;
    position:absolute;
    top:135px;
    border:none;
    box-shadow:rgba(0, 0, 0, 0.5)0px 0px 5px;
}
.button:hover {
    background:#ddd;
}
#links {
    left:0px;
}
#rechts {
    right:0px;
}

JavaScript

l = document.getElementById("links");
r = document.getElementById("rechts");
bx = document.getElementById("slider");
l.addEventListener("click", moveR, false);
r.addEventListener("click", moveL, false);
y = -405;

function moveL() {
    y -= 400;
    bx.style.marginLeft = y + "px";
    bx.style.transition = "0.5s";
    setTimeout(function () {
        test();
    }, 500);
}

function test() {
    if (y <= -2005) {
        y = -405;
        bx.style.marginLeft = y + "px";
        bx.style.transition = "0s"
    } else {}
}

function moveR() {
    y += 400;
    bx.style.marginLeft = y + "px";
    bx.style.transition = "0.5s";
    setTimeout(function () {
        testb();
    }, 500);
}

function testb() {
    if (y >= -405) {
        y = -2005;
        bx.style.marginLeft = y + "px";
        bx.style.transition = "0s"
    } else {}
}