Infinite slider doesn't repeat list icons & stops briefly after one cycle before repeating

I'm working on an infinite slider using Angular 17, HTML, SCSS, and TypeScript. The slider works as expected initially, but after all icons from the list have been displayed once, nothing is visible for a few seconds before the animation restarts from the beginning.

I want the slider to loop seamlessly, showing the same icons again without any pause.

My HTML:

<div class="slide-track" #sliderTrack>
@for (item of slider_items; track item) {
<div class="slide mr-8">
<img ngSrc="{{ item.image_url }}" width="64" height="64"
alt="Clank ~ Discord-Bot (Guild {{ item.guild_name}} Icon)" class="img-fluid rounded-full" />
</div>
}
</div>


TypeScript from component:

export class LandingPageComponent implements AfterViewInit {
@ViewChild('sliderTrack')
protected sliderTrack!: ElementRef<HTMLDivElement>;
protected readonly nav_items = nav_items;
protected slider_items: SliderItems[] = [
{
image_url: 'https://cdn.discordapp.com/icons/671065574821986348/313528b52bc81e964c3bd6c1bb406b9b.png?size=64',
guild_name: 'Bl4cklist',
guild_invite: 'https://discord.gg/bl4cklist'
},
// additional items...
];

constructor(private animations: AnimationService) {
// clone the list for the slider; is needed for the infinite loop
this.slider_items = [...this.slider_items, ...this.slider_items];
}

ngAfterViewInit(): void {
// set amount of slides for the infinite loop
this.sliderTrack.nativeElement.style.width = `calc(150px * ${this.sliderTrack.nativeElement.children.length / 2})`;
}
}


My SCSS:

.slider {
background: transparent;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
margin: auto;
overflow:hidden;
position: relative;
width: 960px;

&::before,
&::after {
content: "";
height: 100px;
position: absolute;
width: 200px;
z-index: 2;
}

&::after {
right: 0;
top: 0;
transform: rotateZ(180deg);
}

&::before {
left: 0;
top: 0;
}

.slide-track {
animation: scroll 40s linear infinite;
display: flex;
width: calc(150px * 10);
}

.slide {
height: 64px;
width: 64px;
}
}


Showcase of the problem (it's speed-up because of the little waiting time at the end):

Continue reading...