I've been attempting to execute the code below, but I keep encountering an error. I even tried including document.addEventListener('DOMContentLoaded', (event) => yet it still doesn't work. Interestingly, there are no errors if I run the code in the console. It runs without any issues on the initial load, but upon refreshing the page, the errors start appearing.
import './Slider.css';
import Acc from './Accomodation/Acc'
import Flora from './Flora/Flora'
import Food from './OurFood/Food.js'
import Trek from './Treks/Treks';
import View from './OurView/View';
import Indoor from './IndoorGames/games';
let slideIndex = 0;
SlideShow()
function SlideShow(){
let slides = document.getElementsByClassName("slide")
console.log(slides)
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
console.log(slideIndex)
console.log(slides)
if (slideIndex === 0) {slideIndex = 1}
else if (slideIndex === slides.length) {slideIndex = 1}
else if (slideIndex > slides.length) {slideIndex = 1}
console.log(slides[slideIndex])
slides[slideIndex-1].style.display = "block";
setTimeout(SlideShow, 10000);
}
function Slider() {
return (
<div className='Slider'>
<h1>Experiences</h1>
<hr />
<div className='MySlides'>
<div className='1 slide fade'>
<Acc></Acc>
</div>
<div className='2 slide fade'>
<Flora></Flora>
</div>
<div className='3 slide fade'>
<Food></Food>
</div>
<div className='4 slide fade'>
<Trek></Trek>
</div>
<div className='5 slide fade'>
<View></View>
</div>
<div className='6 slide fade'>
<Indoor></Indoor>
</div>
</div>
</div>
)
}
export default Slider;