Your code has some semantic issues that need to be addressed.
Upon reviewing your JavaScript code, I noticed the following problems:
showSlides(slideIndex); // --> Here, you are calling the showSlides function with slideIndex being undefined,
// perhaps you are missing a declaration like "var slideIndex = 0" or something similar
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1 // --> At this point, slideIndex has not been declared yet, is it supposed to be global?
// If not, you need to declare it at the top, maybe after "var i;" declaration.
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "block";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += "active";
}
Please fix these issues, test it out, and let me know how it goes.
Lastly, if you intend to load your JavaScript code within the head tag, make sure to wrap it in a function that executes only after the DOM has fully loaded, like this:
document.addEventListener("DOMContentLoaded", function(event) {
//your code
});
Alternatively, you can place your script tag right before the closing body tag.