JS/HTML/CSS Image carousel not loading correctly

I am trying to include a carousel to my website, but there’s a bug where the carousel doesn’t load properly. It flashes with the image(s) but then it disappears. You can see the video below of this error.

Chrome console shows:

Uncaught TypeError: Cannot read properties of undefined (reading 'style')
    at showSlides (index.html:540)
    at index.html:518

You can see an example here of the problem: Video example of problem

JS is as follows:

var slidePosition = 1;
SlideShow(slidePosition);
 
// forward/Back controls
function plusSlides(n) {
  SlideShow(slidePosition += n);
}
 
//  images controls
function currentSlide(n) {
  SlideShow(slidePosition = n);
}
 
function SlideShow(n) {
  var i;
  var slides = document.getElementsByClassName("Containers");
  var circles = document.getElementsByClassName("dots");
  if (n > slides.length) {slidePosition = 1}
  if (n < 1) {slidePosition = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < circles.length; i++) {
      circles[i].className = circles[i].className.replace(" enable", "");
  }
  slides[slidePosition-1].style.display = "block";
  circles[slidePosition-1].className += " enable";
}

CSS: Link to CSS code

HTML: Link to HTML code