@Yasin Shaik11 Try below code in widget:

HTML:

<div>
<span class="glyphicon glyphicon-chevron-left" ng-click="c.scrollLeftFunction()"></span>
<span class="glyphicon glyphicon-chevron-right" ng-click="c.scrollRightFunction()"></span>
</div>
<div id="main-container">
<div class="sub-container" style="width:{{data.subContainerWidth}}">
<div class="card" style="width:{{data.divWidth}}px" ng-repeat="movie in data.movies track by $index" ng-click="c.cardClickFunction(movie)">
{{movie.name}}
</div>
</div>
</div>

CSS:

#main-container{
width: 100%;
overflow: auto;
}

.sub-container{
display: flex;
flex-direction: row;
gap: 4px;
}

.card{
background-color: red;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}

.glyphicon-chevron-left{
top: 110px;
left: 20px;
cursor: pointer;
}

.glyphicon-chevron-right{
top: 110px;
right: 20px;
float: right;
cursor: pointer;
}

Client script:

api.controller=function() {
/* widget controller */
var c = this;

c.scrollLeftFunction = function(){
document.getElementById("main-container").scrollLeft += c.data.divWidth;
}

c.scrollRightFunction = function(){
document.getElementById("main-container").scrollLeft -= c.data.divWidth;
}

c.cardClickFunction = function(movie){
alert("you clicked "+movie.name)
}
};

Service script:

(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */

data.movies = [
{
"name" : "Movie 1"
},
{
"name" : "Movie 2"
},
{
"name" : "Movie 3"
},
{
"name" : "Movie 4"
},
{
"name" : "Movie 5"
},
{
"name" : "Movie 6"
},
{
"name" : "Movie 7"
},
{
"name" : "Movie 8"
},
{
"name" : "Movie 9"
},
{
"name" : "Movie 10"
},
{
"name" : "Movie 11"
},
{
"name" : "Movie 12"
},
{
"name" : "Movie 13"
},
{
"name" : "Movie 14"
},
{
"name" : "Movie 15"
},
{
"name" : "Movie 16"
},
{
"name" : "Movie 17"
},
{
"name" : "Movie 18"
},
{
"name" : "Movie 19"
},
{
"name" : "Movie 20"
},
{
"name" : "Movie 21"
},
{
"name" : "Movie 22"
},
{
"name" : "Movie 23"
},
{
"name" : "Movie 24"
}
];

data.divWidth = 200; //in pixels
data.subContainerWidth = data.movies.length * data.divWidth +"px";
})();

Result:

Note:

Change the code as per your requirement

Please mark as correct answer if this solves your issue.