JSFiddle - React, Tailwind, and code Playground

HTML

<div id="imgThumbs" class="scroller" style="position:relative;height:75px;width: 306px; overflow: hidden; white-space: nowrap;">
    <a href="#" id="left-button" style="left:14px;top:25px;position:absolute;">
        <img src="http://placehold.it/20x20/000000" width="20" height="20" />
    </a>  
    <a href="#" id="right-button" style="right:14px;top:25px;position:absolute;">
        <img src="http://placehold.it/20x20/000000" width="20" height="20" />                               
    </a>
    <div id="contentScroller">                                              
        <a class="fancybox" rel="group" href="#" style="text-decoration:none!IMPORTANT;color:white!IMPORTANT;" class="showImg">
            <img class="image" src="http://placehold.it/90x68" width="90" height="68" />
        </a>
        <a class="fancybox" rel="group" href="#" style="text-decoration:none!IMPORTANT;color:white!IMPORTANT;" class="showImg">
            <img class="image" src="http://placehold.it/90x68" width="90" height="68" />
        </a>
        <a class="fancybox" rel="group" href="#" style="text-decoration:none!IMPORTANT;color:white!IMPORTANT;" class="showImg">
            <img class="image" src="http://placehold.it/90x68" width="90" height="68" />
        </a>
        <a class="fancybox" rel="group" href="#" style="text-decoration:none!IMPORTANT;color:white!IMPORTANT;" class="showImg">
            <img class="image" src="http://placehold.it/90x68" width="90" height="68" />
        </a>
        <a class="fancybox" rel="group" href="#" style="text-decoration:none!IMPORTANT;color:white!IMPORTANT;" class="showImg">
            <img class="image" src="http://placehold.it/90x68" width="90" height="68" />
        </a>        
     </div>
</div>

JavaScript

< script > jQuery(document).ready(function($) {
    $('#right-button').click(function() {
        $('#contentScroller').animate({
            marginLeft: "-=306px"
        }, "fast");
        updateRightLeftButtons();
    });
    $('#left-button').click(function() {
        $('#contentScroller').animate({
            marginLeft: "+=306px"
        }, "fast");
        updateRightLeftButtons();
    });
    updateRightLeftButtons();
});

function updateRightLeftButtons() {
    if ((306 > parseInt($('#contentScroller').css('marginLeft'))) {
        $('#left-button').hide();
    }
    if ((-$('#contentScroller').width() + 306 + 306) > parseInt($('#contentScroller').css('marginLeft'))) {
        $('#right-button').hide();
    }
    } < /script>