I am seeking to create a brand slider in Angular without relying on any external libraries or packages. The functionality I desire is as follows:
1 2 3(active) 4 5
2 3 4(active) 5 6
3 4 5(active) 6 7
4 5 6(active) 7 (empty)
5 6 7(active) (empty) (empty)
The desired slider layout is:
6 7 1(active) 2 3
7 1 2(active) 3 4
1 2 3(active) 4 5
2 3 4(active) 5 6
3 4 5(active) 6 7
4 5 6(active) 7 1
5 6 7(active) 1 2
This is the related Angular code:
visibleLogos: Array<{ id: string; name: string; isActive: boolean, src: string }> = [];
private logoChangeInterval: Subscription;
...
ngOnInit() {
this.updateVisibleLogos();
}
...
updateVisibleLogos() { //this is the problematic algorithm
const startIndex = this.activeLogoIndex % this.logos.length;
let endIndex = (startIndex + 4) % this.logos.length;
if (endIndex === 0) {
endIndex = this.logos.length - 1;
} else if (endIndex < startIndex) {
endIndex = endIndex + this.logos.length;
}
if (endIndex >= this.logos.length) {
endIndex = this.logos.length - 1;
}
this.visibleLogos = this.logos.slice(startIndex, endIndex + 1);
for (const logo of this.visibleLogos) {
logo.isActive = false;
}
this.visibleLogos[2].isActive = true;
this.activeLogoIndex = (this.activeLogoIndex + 1) % this.logos.length;
if (this.logoChangeInterval) {
this.logoChangeInterval.unsubscribe();
}
this.logoChangeInterval = interval(3000).subscribe(() => this.updateVisibleLogos());
}
In the HTML code:
<div class="logo-slider">
<ul class="w-full">
<li class="bg-gradient" *ngFor="let logo of visibleLogos" [class.active]="logo.isActive"><img src="{{logo.src}}" alt="{{logo.name}}"></li>
</ul>
</div>
This is the corresponding SCSS code:
.logo-slider {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
width: 100%;
}
.logo-slider ul {
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
}
.logo-slider li {
width: 20%;
margin: 10px;
border-radius: 10px;
padding: 10px;
opacity: 0.25;
transition: opacity 0.5s ease-in-out;
cursor: pointer;
}
.logo-slider li.active {
opacity: 1;
}