JSFiddle - React, Tailwind, and code Playground

HTML

<div id="popUpInnerArrowLeft">LeftArrow</div>
<br/>
<div class="outercontainer">
    <div class="thumbsInnerContainer">
        <ul>
            <li>Image</li>
            <li>Image</li>
            <li>Image</li>
            <li>Image</li>
            <li>Image</li>
        </ul>
    </div>
</div>
<br/>
<div id="popUpInnerArrowRight">RightArrow</div>

CSS

ul li {
    list-style:none;
    width:40px;
    height:40px;
    border:1px solid;
    float:left;
    padding:0;
    margin:0;
}
ul {
    padding:0;
    margin:0;
}
.outercontainer {
    width:150px;
    height:50px;
    border:1px solid red;
    overflow:hidden;
}
.thumbsInnerContainer {
    width:210px;
    position:relative;
}

JavaScript

$("#popUpInnerArrowLeft").mousedown(function (event) {
    
    movetoleft();
});

var into, into2;

function movetoleft(){
    function moveit() {
        $(".thumbsInnerContainer").animate({
            left: '-=10px'
        });
    }

    into = setInterval(function () {
        moveit();
    }, 500);

}

$(document).mouseup(function (event) {
    clearInterval(into);

});



//for the right arrow

$("#popUpInnerArrowRight").mousedown(function (event) {
    movetoright();
});

function movetoright() {

    function moveit2() {
        $(".thumbsInnerContainer").animate({
            left: '+=10px'
        });
    }

    into2 = setInterval(function () {
        moveit2();
    }, 500);

}

$(document).mouseup(function (event) {
    clearInterval(into2);
});