JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slidercontainer"> <a href="JavaScript:void(0)" onclick="slideLeft()"><img src="http://www.chrishowie.co.uk/sands/images/arrow-left.png" id="leftslidebtn" alt="Slide Left"/></a>
 <a href="JavaScript:void(0)" onclick="slideRight()"><img src="http://www.chrishowie.co.uk/sands/images/arrow-right.png" id="rightslidebtn" alt="Slide Right"/></a>

    <div id="slider">
        <div id="slider1">
            <div class="projectoverlay">
                <h4 class="cushycms" title="Main Page Slide 1 Title">Project 1</h4>
            </div>
        </div>
        <div id="slider2">
            <div class="projectoverlay">
                <h4 class="cushycms" title="Main Page Slide 2 Title">Project 2</h4>
            </div>
        </div>
        <div id="slider3">
            <div class="projectoverlay">
                <h4 class="cushycms" title="Main Page Slide 3 Title">Project 3</h4>
            </div>
        </div>
        <div id="slider4">
            <div class="projectoverlay">
                <h4 class="cushycms" title="Main Page Slide 4 Title">Project 4</h4>
            </div>
        </div>
    </div>
    <ul id="sliderlist">
        <li><span id="sldr0" class="sliderbutton sliderbuttonactive"></span>
        </li>
        <li><span id="sldr1" class="sliderbutton"></span>
        </li>
        <li><span id="sldr2" class="sliderbutton"></span>
        </li>
        <li><span id="sldr3" class="sliderbutton"></span>
        </li>
    </ul>
</div>

CSS

html,body {
    height: 100%;
}

#slidercontainer {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    text-align: center;
}
#slider {
    position: relative;
    width: 400%;
    height: 100%;
    margin: 0px;
    transition: transform ease-in 2s;
    -moz-transition: transform ease-in 2s;
    -o-transition: transform ease-in 2s;
    -webkit-transition: transform ease-in 2s;
    -ms-transition: transform ease-in 2s;
    transform: translateX(0%);
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    -webkit-transform: translateZ(0);
}

#leftslidebtn {
    position: absolute;
    right: 95%;
    top: 25%;
    width: 5%;
    max-height: 50%;
    max-width: 5%;
    opacity: 0.6;
    z-index: 999;
    display: none;
    visibility: hidden;
}
#rightslidebtn {
    position: absolute;
    left: 95%;
    top: 25%;
    max-height: 50%;
    max-width: 5%;
    opacity: 0.6;
    z-index:999;
}
.projectoverlay {
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    text-align: center;
}
#slider1 {
    width: 25%;
    height: 100%;
    float: left;
    border: 0;
    padding: 0;
    margin: 0;
    background-image: url(http://www.chrishowie.co.uk/sands/images/1.jpg);
    background-size: cover;
    background-position: center;
}
#slider2 {
    width: 25%;
    height: 100%;
    float: left;
    border: 0;
    padding: 0;
    margin: 0;
    background-image: url(http://www.chrishowie.co.uk/sands/images/2.jpg);
    background-size: cover;
    background-position: center;
}
#slider3 {
    width: 25%;
    height: 100%;
    float: left;
    border: 0;
    padding: 0;
    margin: 0;
    background-image: url(http://www.chrishowie.co.uk/sands/images/3.jpg);
    background-size: cover;
    background-position: center;
}
#slider4 {
    width: 25%;
    height: 100%;
    float: left;
    border: 0;
    padding: 0;
    margin: 0;
    background-image:...

JavaScript

// DIV slider

window.sliding = false;

function slideRight() {

    if (sliding) {
        return false
    };
    window.sliding = true;

    el = document.getElementById("slider");
    cst = getComputedStyle(el);
    transformst = cst.transform || cst.webkitTransform || cst.mozTransform;
    widthst = cst.width;
    widthst = widthst.replace("px", ""); // computed width of slider (7680px)
    slidewidth = widthst / 4;

    transformst = transformst.replace("matrix(", "");
    transformst = transformst.replace(")", "");

    transformst = transformst.split(",");
    transformst = transformst[4]; // returns current transform in px without unit (px)
    if (!transformst) {
        transformst = 0;
    }

    var activebtn = "sldr" + Math.round((Number(transformst) / (-1 * slidewidth)));
    document.getElementById(activebtn).classList.remove("sliderbuttonactive");

    if (activebtn != "sldr3") {
        document.getElementById("slider" + Math.round((2 + Number(transformst) / (-1 * slidewidth)))).style.visibility = "visible";
        document.getElementById("slider" + Math.round((2 + Number(transformst) / (-1 * slidewidth)))).style.display = "initial";
        document.getElementById("slider").style.transform = "translate3d(" + 25 * ((Number(transformst) / (slidewidth)) - 1) + "%, 0, 0)";
        document.getElementById("slider").style.transform = "-webkit-translate3d(" + 25 * ((Number(transformst) / (slidewidth)) - 1) + "%, 0, 0)";
        document.getElementById("slider").style.transform = "-moz-translate3d(" + 25 * ((Number(transformst) / (slidewidth)) - 1) + "%, 0, 0)";
        document.getElementById("slider").style.transform = "-ms-translate3d(" + 25 * ((Number(transformst) / (slidewidth)) - 1) + "%, 0, 0)";
        document.getElementById("leftslidebtn").style.visibility = "visible";
        document.getElementById("leftslidebtn").style.display = "block";
    }

    activebtn = activebtn.replace("sldr", "");
    activebtn = "sldr" + (1 +...