Having some trouble creating a slideshow within my angular application. Struggling to get the images to display in the html code.
To tackle this, I decided to create a separate component specifically for the slideshow (carousel.component). In the main app component, I've set up a navbar and right below it, there's a container where I've embedded my carousel component anticipating the slideshow to show up in that space.
Update: Managed to replicate the issue on stackblitz. Here's the link:
app.component.html
<app-navbar></app-navbar>
<div class="container">
<app-carousel></app-carousel>
</div>
app.component.css
.container {
width: 100%;
min-height: 100vh;
}
carousel.component.html
<div class="slideshow">
<div class="slides">
<div class="slide" *ngFor="let image of images">
<img [src]="image" alt="">
</div>
</div>
</div>
carousel.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-carousel',
templateUrl: './carousel.component.html',
styleUrls: ['./carousel.component.css']
})
export class CarouselComponent {
images = [
'http://localhost:4200/assets/images/img1.jpeg',
'http://localhost:4200/assets/images/img2.jpeg',
'http://localhost:4200/assets/images/img3.jpeg'
];
constructor() {}
currentIndex = 0;
ngOnInit() {
setInterval(() => {
this.currentIndex = (this.currentIndex + 1) % this.images.length;
}, 5000); // change image every 5 seconds
}
getSlideClasses(index) {
const classes = ['slide'];
if (index === this.currentIndex) {
classes.push('active');
}
return classes;
}
}
carousel.component.css
.slideshow {
position: relative;
overflow: hidden;
width: 100%;
/* height: calc(100vh - 50px); subtract the height of your navbar */
height:100%;
min-height: 500px;
}
.slides {
display: flex;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slide {
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slide img {
height: 100%;
width: 100%;
object-fit: cover;
}
.slide.active {
opacity: 1;
}
I've tried setting a fixed height and inspected using developer tools. The divs are visible and the images themselves can't be located. Still at a loss as to why the images aren't displaying.