JSFiddle - React, Tailwind, and code Playground

HTML

<div class="scroll-box-container">
                <div class="image-container">
                    <img src="http://orig14.deviantart.net/405b/f/2012/180/b/f/pattern_variation_by_absurdwordpreferred-d55auet.jpg">
                </div>
                <div class="control right"></div>
                <div class="control down"></div>
                <div class="control left"></div>
                <div class="control up"></div>
            </div>

CSS

.scroll-box-container {
                position: relative;
                max-width: 100%;
                height: 500px;
            }
            
            .image-container {
                overflow: hidden;
                height: 100%;
                width: 100%;
            }
            .scroll-box-container .control {
                width: 20px;
                position: absolute;
                background-color: #ccc;
                opacity: 0.3;
            }
            .scroll-box-container .right {
                height: 500px;
                right: 0;
                top: 0;
            }
            .scroll-box-container .down {
                width: calc(100% - 40px);
                height: 20px;
                left: 0;
                bottom: 0;
                margin-left: 20px;
                margin-right: 20px;
            }
            .scroll-box-container .left {
                height: 500px;
                left: 0;
                top: 0;
            }
            .scroll-box-container .up {
                width: calc(100% - 40px);
                height: 20px;
                left: 0;
                top: 0;
                margin-left: 20px;
                margin-right: 20px;
            }

JavaScript

var interval;
          

			$('.left').on('mousedown', function(event) {
    			var target = $(".image-container");
                    var current_x = target.scrollLeft();

                    if( target.length ) {
                        event.preventDefault();
                        $(target).animate({
                            scrollLeft: current_x-100
                         }, 500,"linear");
                    }
                interval = setInterval(function(){
                    var target = $(".image-container");
                    var current_x = target.scrollLeft();

                    if( target.length ) {
                        event.preventDefault();
                        $(target).animate({
                            scrollLeft: current_x-100
                         }, 500,"linear");
                    }
                },500);
            })
			.on('mouseup',function(){clearInterval(interval);});
			$('.right').on('mousedown', function(event) {
    			var target = $(".image-container");
                    var current_x = target.scrollLeft();

                    if( target.length ) {
                        event.preventDefault();
                        $(target).animate({
                            scrollLeft: current_x+100
                        }, 500, "linear");
                    }
                interval = setInterval(function(){
                    var target = $(".image-container");
                    var current_x = target.scrollLeft();

                    if( target.length ) {
                        event.preventDefault();
                        $(target).animate({
                            scrollLeft: current_x+100
                        }, 500,"linear");
                    }
                },500);
            })
			.on('mouseup',function(){clearInterval(interval);});
            
            $('.up').on('click', function(event) {
                var target = $(".image-container");
                var...