I’m trying to create a simple Carousel in Angular but the interaction part doesn’t work , I didn’t figure out the issue, can someone help me pls?
When clicking on buttons they don’t change the different pictures..
I tried to use ChatGpt and it doesn’t help that much ..
I’m expecting to make the interaction part work…
This is the code :
slideshow.component.html :
<body>
<div id="carousel-container">
<div *ngIf=" images && images.length > 0" class="carousel-container">
<div *ngFor="let image of images; let i = index">
<img [src]="image.imagesrc" [alt]="image.imagealt"
[ngClass]="{'image-active': selectedIndex === i}"
(click)="selectImage(i)" class="fade">
</div>
<div *ngIf="indicators" class="carousel-dot-container">
<span class="dot" *ngFor="let dot of images; let i = index"
[ngClass]="{'dot-active': selectedIndex === i}"
(click)="selectImage(i)">
</span>
</div>
<a class="prev" (click)="previousSlide()">❮</a>
<a class="next" (click)="nextSlide()">❯</a>
</div>
</div>
</body>
</html> ,
slideshow.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
interface SlideContent{
imagesrc: string;
imagealt: string;
}
@Component({
selector: 'app-slideshow',
standalone: true,
imports: [CommonModule],
templateUrl: './slideshow.component.html',
styleUrl: './slideshow.component.css'
})
export class SlideshowComponent implements OnInit {
@Input() images: SlideContent[] = [];
@Input() indicators = true;
selectedIndex = 0;
intervalId:any;
ngOnInit(): void {
console.log('Slideshow initialized with images:', this.images);
}
//sets index of image on dot/indicator click
selectImage(index: number): void{
this.selectedIndex= index;
}
startAutoSlide() {
this.intervalId = setInterval(() => {
this.nextSlide();
}, 3000); // Change slide every 3 seconds
}
nextSlide() {
this.selectedIndex = (this.selectedIndex + 1) % this.images.length;
}
previousSlide() {
this.selectedIndex = (this.selectedIndex - 1 + this.images.length) % this.images.length;
}
}
App.component.ts
images =[
{
imagesrc:'example',
imagealt:"example",
},
{
imagesrc: 'example',
imagealt:"example",
},
{
imagesrc:'example',
imagealt:"example",
},
}
And then in App.component.html:
<app-slideshow [images]="images" [indicators]="true"></app-slideshow>