JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navBox">
    <h2>Galleries</h2>
    
    <div id="wrapper">
        <table cellpadding="0" cellspacing="0" border="0" class="gallery-table">
            <tr valign="bottom">
                <td valign="top" class="cell" align="left" height="160">
                    <p>
                        <img src="photo.png" width="120" height="100" alt="" class="rahmen" /><br />
                         <strong>Gallery 1</strong>
                    </p>
                    <br />
                </td>
                <td valign="top" class="cell" align="left" height="160">
                    <p>
                        <img src="photo.png" width="120" height="100" alt="" class="rahmen" /><br />
                         <strong>Gallery 2</strong>
                    </p>
                    <br />
                </td>
                <td valign="top" class="cell" align="left" height="160">
                    <p>
                        <img src="photo.png" width="120" height="100" alt="" class="rahmen" /><br />
                         <strong>Gallery 3</strong>
                    </p>
                    <br />
                </td>
                <td valign="top" class="cell" align="left" height="160">
                    <p>
                        <img src="photo.png" width="120" height="100" alt="" class="rahmen" /><br />
                         <strong>Gallery 4</strong>
                    </p>
                    <br />
                </td>
                <td valign="top" class="cell" align="left" height="160">
                    <p>
                        <img src="photo.png" width="120" height="100" alt="" class="rahmen" /><br />
                         <strong>Gallery 5</strong>
                    </p>
                    <br />
                </td>
                <td valign="top" class="cell" align="left" height="160">
                    <p>
                        <img src="photo.png" width="120" height="100" alt="" class="rahmen"...

CSS

.navBox {
    width: 300px;
    border: 1px solid #BFD3E9;
    background-color: #fff;
}

h2 {
    font-size: 10px;
    font-style: normal;
    font-weight: bold;
}

.gallery-table {
    border-spacing: 5px;
    border-collapse: separate;
    position: absolute;
    left: 0;
    transition: left 1s;
}

.gallery-table td {
    background: #f8f9fb;
    width: 130px;
    padding: 10px;
    border: 1px solid #BFD3E9;
}

#wrapper {
    position: relative;
    max-width: 300px;
    height: 185px;
    overflow: hidden;
}


.slide-control .left, .slide-control .right {
    position: absolute;
    width: 25px;
    height: 40px;
    bottom: 80px;
    cursor: pointer;
    opacity: 0.2;
}

.slide-control .left:hover, .slide-control .right:hover {
    opacity: 1.0;
}

.slide-control .left {
    background: url(left.png);
    left: 10px;
}

.slide-control .right {
    background: url(right.png);
    right: 10px;
}

JavaScript

$(document).ready(function () {
    var leftControl = $("#wrapper .slide-control .left");
    var rightControl = $("#wrapper .slide-control .right");
    var pixel = $("#wrapper .gallery-table td").outerWidth() + 5;
    var total_width = $("#wrapper .gallery-table").innerWidth();
    var cols = 2;
    
    console.log("TW: " + total_width + " | TD: " + pixel);
    
    leftControl.click(function () {
        var actLeft = parseFloat($("#wrapper .gallery-table").css( "left" ));
        setTimeout(
            function() {
                alert("Called after delay.");
            },
            2000);
        actLeft = actLeft + pixel;
     
        if (actLeft > 0) {
            actLeft = 5 - total_width + (cols * pixel);
        }
        $("#wrapper .gallery-table").css("left", actLeft + "px");
    });
    
    rightControl.click(function () {
        var actLeft = parseFloat($("#wrapper .gallery-table").css( "left" ));
        setTimeout(
            function() {
                alert("Called after delay.");
            },
            2000);
        actLeft = actLeft - pixel;
        console.log("actLeft: " + actLeft + " | total: " + total_width);
        
        if ((5 + Math.abs(actLeft) + (cols * pixel)) > total_width) {
            actLeft = 0;   
        }
        
        $("#wrapper .gallery-table").css("left", actLeft + "px");
    });
        
});