@Yasin Shaik11 Update the code like below

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="list-group-item card" style="width:{{data.divWidth}}px" ng-repeat="a in ::data.articles">
<a href="?id=kb_article&sys_id={{::a.sys_id}}" aria-label="{{::a.ratingAriaLabel}}">{{::a.short_description}}</a>
<div>
<span uib-rating sp-rating ng-model="::a.rating" max="5" readonly="true" aria-hidden="true" state-on="'fa fa-star kb-star-on'" state-off="'fa fa-star kb-star-off'" />
</div>
</div>

</div>
</div>

CSS:

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

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

.card{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 150px;
}

.glyphicon-chevron-left{
top: 90px;
left: 20px;
cursor: pointer;
z-index: 1000;
}

.glyphicon-chevron-right{
top: 90px;
right: 20px;
float: right;
cursor: pointer;
z-index: 1000;
}

@media screen and (-ms-high-contrast: active) {
.panel-body .list-group .list-group-item .glyphicon-star {
color: windowText !important;
}
}

.kb-star-on {
color: $fav-star-color !important;
text-shadow: $fav-star-outline;
}

.kb-star-off {
color: $fav-star-color-off !important;
text-shadow: $fav-star-outline;
}

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;
}
};

Server script:

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

data.articles = [];
options.title = options.title || gs.getMessage("Top Rated Articles");

var z;
var knowledge_bases;
var sys_id = $sp.getParameter('sys_id');
var kb_id = $sp.getParameter('kb_id');
var gr = new GlideRecord("kb_knowledge");
data.sysId = sys_id;

var foundArticle = false;
if (sys_id) { // sys_id specified, try to find an article by sys_id or number
gr.addQuery("sys_id", sys_id).addOrCondition("number", sys_id);
gr.query();
if (gr.next() && gr.canRead()) {
// When sys_id matches a kb_record, get KB of the article
knowledge_bases = String(gr.getValue('kb_knowledge_base'));
foundArticle = true;
}
}

if (!foundArticle) { /* For all other pages this code will get executed. Used on knowledge home page.*/
/*If KB is selected display top rated articles only from that KB*/
if (kb_id != null)
knowledge_bases = String(kb_id);
else {
/*Get all knowledge bases associated with Portal*/
knowledge_bases = String($sp.getKnowledgeBases());
}
}

if (GlideStringUtil.notNil(knowledge_bases))
z = $sp.getAllKBRecords(knowledge_bases);
else //If there are no accessible KBs for logged in user
return;

z.addQuery("rating", ">", "0");
if (options.kb_category)
z.addQuery("kb_category", options.kb_category);
z.orderByDesc('rating');
//z.setLimit(options.max_number || 5);
z.query();
while (z.next()) {
if (!z.canRead())
continue;

var a = {};
$sp.getRecordValues(a, z, 'short_description,sys_view_count,sys_id,published,rating');
a.published_display = z.getDisplayValue("published");
a.rating = Math.round(a.rating);
a.ratingAriaLabel = gs.getMessage('Article, {0}, {1} star rating', [z.short_description, z.rating]);
data.articles.push(a);
}

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

Result:

Please mark all the answers on this question as correct answers.