I have implemented an 'image slide show' that switches between images every two seconds by toggling their display types from "none" to "block".
Within my .js file, the showSlides function is declared at the top:
var slideIndex = 0;
function showSlides() {
if (process.browser) {
let i;
let slides = document.getElementsByClassName("introSlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
if (slideIndex >= slides.length) {
slideIndex = 0
}
//console.log("Displaying image %s/%s" % (slideIndex, slides.length))
if (slides != null && slides[slideIndex] != null) {
slides[slideIndex].style.display = "block";
slideIndex++;
}
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
}
Next, I have included four items and invoked the showSlides function within the HTML of the Home() function in the same .js file:
{/*Character intros image gallery*/}
<div class="fontSizeZero">
<div className="introSlides fade">
<img src="/poster-shinji.jpg" className="fullWidthImage"></img>
</div>
<div className="introSlides fade">
<img src="/poster-omi.jpg" className="fullWidthImage"></img>
</div>
<div className="introSlides fade">
<img src="/poster-crash.jpg" className="fullWidthImage"></img>
</div>
<div className="introSlides fade">
<img src="/poster-stiletto.jpg" className="fullWidthImage"></img>
</div>
</div>
{/*Call the slide show function*/}
<script>
{showSlides()}
</script>
However, this implementation only functions intermittently. Sometimes, the transition between images is too fast, making it hard to perceive the images. This issue seems to occur when leaving and returning to the page.
I am uncertain about the global slideIndex variable and would appreciate any suggestions on how to approach this implementation.
Apologies, as I am new to NextJS. Thank you for any advice.