CSS Slider Dots不会与当前幻灯片保持白色

Question

我有一个CSS / JavaScript滑块，我正在从w3school重新设计

不知何故，我从底部损坏了这些参考点，正在使用的参考点（实际幻灯片）没有变白。我要达到的目的是保持实际的幻灯片点为白色，一旦它自动更改为另一个，就会自动/将另一个点变成白色。似乎暂时不起作用。

var slideIndex = 1;
showDivs(slideIndex);

var myIndex = 0;
carousel();

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  myIndex++;
  if (myIndex > x.length) {
    myIndex = 1
  }
  x[myIndex - 1].style.display = "block";
  setTimeout(carousel, 5000); // Change image every 2 seconds
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dots");
  if (n > x.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = x.length
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" white", "");
  }
  x[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " white";
}

.dotsCentralizer {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.dots {
  background-color: #000;
  color: #fff;
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-left: 5px;
  margin-right: 5px;
}

.dots {
  background-color: #000!important;
}

.white:hover {
  background-color: #fff!important;
}

<div class="superSliderContainer mySlides">
  <img src="./images/image1.jpg" class="slideImage">
  <div class="blackBg"></div>
  <div class="slideTextCentralizer">
    <div class="slideText">
      IMAGE
    </div>
    <a href="">
      <div class="slideText2">
        Log in Now
      </div>
    </a>
  </div>
</div>
<div class="dotsCentralizer">
  <span class="dots white" onclick="currentDiv(1)"></span>
  <span class="dots white" onclick="currentDiv(2)"></span>
</div>

有人可以帮助我理解吗？