I'm in the process of creating a carousel component in Angular, but I'm facing an issue where the carousel is not appearing as it should. Below is the code for my carousel component.
carousel.component.html:
<div class="carousel">
<div class="carousel-container">
<div *ngFor="let image of images; let i = index" [ngClass]="{'slide': true, 'active-anim': currentSlideIndex === i}">
<img [src]="getImageUrl(i)" alt="">
</div>
<button class="btn-carousel prev" (click)="prevSlide()">
<img src="../../../../assets/icons/prev.svg" alt="Previous">
</button>
<button class="btn-carousel next" (click)="nextSlide()">
<img src="../../../../assets/icons/next.svg" alt="Next">
</button>
<div class="container-dots">
<div *ngFor="let image of images; let i = index" class="dot" [ngClass]="{'active': currentSlideIndex === i}" (click)="currentSlideIndex = i"></div>
</div>
</div>
</div>
carousel.component.css:
.carousel-container {
max-width: 650px;
height: 500px;
position: relative;
overflow: hidden;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
border-radius: 36px;
margin-left: 85px;
margin-right: 60px;
width: 100%;
float: left;
}
@media (max-width: 1199px) {
.carousel-container {
margin-right: 20px;
margin-left: 20px;
}
}
@media (max-width: 1000px) {
.carousel-container {
margin: 100px auto;
width: 95%;
float: none;
max-width: none;
align-items: center;
}
}
.slide {
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
transition: opacity ease-in-out 0.4s;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.active-anim {
opacity: 1;
}
.btn-carousel {
width: 60px;
height: 60px;
border-radius: 50%;
background: #f1f1f1;
border: 1px solid rgba(34, 34, 34, 0.287);
position: absolute;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.btn-carousel img {
width: 25px;
height: 25px;
pointer-events: none;
}
.prev {
top: 50%;
left: 20px;
transform: translateY(-60%);
}
.next {
top: 50%;
right: 20px;
transform: translateY(-60%);
}
.container-dots {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
.dot {
width: 20px;
height: 20px;
border-radius: 50%;
border: 3px solid #f1f1f1;
margin: 0 5px;
background: #f1f1f1;
}
.dot.active {
background: rgb(32, 32, 32);
}
carousel.component.ts:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-carousel',
templateUrl: './carousel.component.html',
styleUrls: ['./carousel.component.css']
})
export class CarouselComponent {
@Input() images: string[];
currentSlideIndex = 0;
nextSlide() {
this.currentSlideIndex = (this.currentSlideIndex + 1) % this.images.length;
}
prevSlide() {
this.currentSlideIndex = (this.currentSlideIndex - 1 + this.images.length) % this.images.length;
}
getImageUrl(index: number): string {
return this.images[index];
}
}
This is how I implement my carousel:
<app-carousel [images]="['../assets/images/img1.jpg', '../assets/images/img2.jpg', '../assets/images/img3.jpg']"></app-carousel>
Current appearance of my carousel: https://i.sstatic.net/RdT7F.png
Desired appearance of my carousel: https://i.sstatic.net/3HCqF.png
I've noticed that the layout and styling of my carousel are not meeting my expectations. Specifically, I aim to have the carousel with a fixed width of 650px, a height of 500px, and horizontally centered on the page. Despite applying these styles, the carousel is not displaying as intended.
If anyone could review my code and offer suggestions on how to address this issue, I would greatly appreciate it. Thank you!