Niezrozumiały kod slidera

Witajcie, jestem początkujący i tworzę swój slider, ale zaciąłem się w pewnym momencie, a mianowicie gdy chciałem dodać na wyświetlanym obrazku strzałki do zmiany slajdu. Na w3schools znalazłem slider i postanowiłem się na nim opierać, ale nie do końca rozumiem jego kod.

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}
</style>
<body>

<div class="w3-content w3-display-container" style="max-width:800px">
  <img class="mySlides" src="slajd1.jpg" style="width:100%">
  <img class="mySlides" src="slajd2.jpg" style="width:100%">
  <img class="mySlides" src="slajd3.jpg" style="width:100%">
  <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
    <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div>
    <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
  </div>
</div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

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

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  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(" w3-white", "");
  }
  x[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " w3-white";
}
</script>

</body>
</html>

Po co deklarowane jest "var i", skoro nie zostaje ono użyte nigdzie poza pętlami?

Mam problem ze zrozumieniem tych dwóch pętli. Wg mojego rozumowania pierwsza pętla sprawia, że wszystkie slajdy są niewidoczne poprzez ustawienie display na none. I tu pierwsze pytanie- jeśli mój tok rozumowania jest właściwy to czy document.getElementsByClassName("demo")[i] oznacza odniesienie do konkretnego slajdu, a jeśli tak, to w jaki sposób to się odbywa, skoro nigdzie nie jest zaznaczone, że pierwszym elementem jest np właśnie ten slajd1 czy to wynika z tego fragmentu kodu:
<img class="mySlides" src="slajd1.jpg" style="width:100%">
<img class="mySlides" src="slajd2.jpg" style="width:100%">
<img class="mySlides" src="slajd3.jpg" style="width:100%">

i jeśli tak to jak mam to rozumieć, że automatycznie uznał pierwszy za pierwszy itd? i kolejne pytanie czy te trzy slajdy można traktować jako obiekty klasy "mySlides"?

Kolejna pętla ustawia taką samą klasę dla wszystkich kropek, tylko prosiłbym o dokładne wytłumaczenie jak działa ta linia:

dots[i].className = dots[i].className.replace(" w3-white", "");

domyślam się, że zmienia klasy, ale w jaki sposób to robi i dlaczego podana jest nazwa "w3-white" jeśli taka klasa wyżej nie istnieje?

x[slideIndex-1].style.display = "block";
ta linia zmienia widoczność konkretnego slajdu, ale dlaczego odejmuje 1?

dots[slideIndex-1].className += " w3-white";
Ta linia ntomiast prawdopodobnie zmienia klasę kropki odpowiadającej wyświetlanemu slajdowi, ale możecie wytłumaczyć po kolei w jaki sposób?

Pytań jest dużo i całość pewnie jest banalna i chaotyczna, więc przepraszam, ale proszę o odpowiedzi jak dla zupełnego amatora.
Pozdrawiam :)