I am currently working on building a slideshow using plain HTML, CSS, and JavaScript. I referred to the following example for guidance: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto
However, despite implementing the code provided in the example, the slideshow is not changing every two seconds as expected.
home.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { NgbCarousel, NgbSlideEvent, NgbSlideEventSource } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit {
title: string;
description: string;
role: Number;
public selectedindex: number = 0;
public images = ['../../assets/images/healthimage1.png', '../../assets/images/healthimage2.jpg', '../../assets/images/healthimage3.jpg'];
selectImage(index: number) {
console.log("Index: " + index);
this.selectedindex = index;
console.log("Selected Index: " + this.selectedindex);
}
showSlides() {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
(<HTMLElement>slides[i]).style.display = "none";
}
this.selectedindex++;
if (this.selectedindex > slides.length) { this.selectedindex = 1 }
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
(<HTMLElement>slides[this.selectedindex - 1]).style.display = "block";
dots[this.selectedindex - 1].className += " active";
setTimeout(this.showSlides, 2000);
}
constructor(
private activatedRoute: ActivatedRoute,
private router: Router) {
this.role = 1;
}
ngOnInit() {
this.showSlides();
}
}
home.component.html
<div *ngIf="images">
<div class="mySlides slideshow-container">
<img *ngFor="let image of images; let i=index"
[src]="image"
[ngClass]="{'image-active': selectedindex == i}">
<div style="text-align:center; display:inline-block;" *ngFor="let dot of images; let i=index">
<span class="dot"
(click)="selectImage(i)"
[ngClass]="{'active': selectedindex == i}">
</span>
</div>
</div>
</div>
CSS:
.slideshow-container {
max-width: 1200px;
position: relative;
margin: auto;
text-align:center;
}
.slideshow-container img{
display: none;
}
.slideshow-container img.image-active {
display: block;
width: 100%;
}
/* The dots/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
Would appreciate some help in figuring out what I might be doing wrong and how to resolve this issue. Being new to Angular, I may not have grasped all concepts fully. Initially, I used ngb-carousel, but encountered issues when materialize.min.css had to be removed due to limitations in layout options, prompting me to explore alternative methods.
UPDATE: Upon realizing that I forgot to call the function, attempting to do so within ngInit() results in an error stating
Cannot read property 'style' of undefined
This problem seems to stem from TypeScript not recognizing
slides[this.selectedindex - 1].style.display(<HtmlElement>...) did not rectify the issue either.