function setupDots() {　/*丸いボタンを作るための関数はじまり*/
    for (let i = 0; i < slides.length; i++) {　/*iの最初の数字は0で{}内の処理をする。この処理をiに1ずつ足しながら順に繰り返し、ulの子要素の数未満を最後に止まる*/
      const button = document.createElement('button');　/*button要素を作り、それをbutton定数とする*/
      button.addEventListener('click', () => {　/*button定数をクリックしたら{}内の処理をする*/
        currentIndex = i;　/*iの数字をcurrentIndex変数に代入する*/
        dots.forEach(dot => {　
          dot.classList.remove('current');
        });　/*dots配列の中のbutton要素に対して順にcurrentクラスを外す*/
        dots[currentIndex].classList.add('current');　/*dots配列の中のcurrentIndex番目の要素にcurrentクラスを追加する*/
        updateButtons();　/*currentIndexの数字によって矢印の表示を切り替える*/
        moveSlides();　/*currentIndexの数字によって画像を左方向へ移動する*/
      });
      dots.push(button);　/*dots配列にbutton定数を追加する*/
      document.querySelector('nav').appendChild(button);　/*nav要素の子要素としてbutton要素を追加する*/
    }　/*丸いボタンを作るための関数おわり*/

    dots[0].classList.add('current');　/*dots配列の最初の要素にcurrentクラスをつけておく*/
  } 

すみません！横長になってしまい非常に見づらいのですが、
上記コードには、現在の個人的な解釈をコメントしました。

具体的な質問は、
「丸いボタンをクリックしたときに、なぜ画像が適切な距離だけ左へ流れてくれるのかが分からない」
という内容です。

おそらく、丸いボタンのどれかをクリックしたときに、
「これは何番目のボタンだな」とコンピューター側が認知しますよね。
それが、上記コードのどんな流れによって起きているのか知りたいです。