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 width="20" height="20" />
</a>
<a href="#" id="right-button" style="right:14px;top:25px;position:absolute;">
<img 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" width="90" height="68" />
</a>
<a class="fancybox" rel="group" href="#" style="text-decoration:none!IMPORTANT;color:white!IMPORTANT;" class="showImg">
<img class="image" width="90" height="68" />
</a>
<a class="fancybox" rel="group" href="#" style="text-decoration:none!IMPORTANT;color:white!IMPORTANT;" class="showImg">
<img class="image" width="90" height="68" />
</a>
<a class="fancybox" rel="group" href="#" style="text-decoration:none!IMPORTANT;color:white!IMPORTANT;" class="showImg">
<img class="image" width="90" height="68" />
</a>
<a class="fancybox" rel="group" href="#" style="text-decoration:none!IMPORTANT;color:white!IMPORTANT;" class="showImg">
<img class="image" width="90" height="68" />
</a>
</div>
</div>
JavaScript
var updateRightLeftButtons = function() {
if (306 > (parseInt($('#contentScroller').css('marginLeft')) * -1)) {
$('#left-button').hide();
} else {
$('#left-button').show();
}
if ((($('#contentScroller a').width() * $('#contentScroller a').length) - 306) < (parseInt($('#contentScroller').css('marginLeft')) * -1)) {
$('#right-button').hide();
} else {
$('#right-button').show();
}
};
$('#right-button').click(function() {
updateRightLeftButtons();
if ($(this).is(':visible'))
$('#contentScroller').animate({
marginLeft: "-=306px"
}, "fast", updateRightLeftButtons);
});
$('#left-button').click(function() {
updateRightLeftButtons();
if ($(this).is(':visible'))
$('#contentScroller').animate({
marginLeft: "+=306px"
}, "fast", updateRightLeftButtons);
});
updateRightLeftButtons();