Zobakka

// получаем массив элементов с именем класса 'slider-nav__dot'
var dots = document.getElementsByClassName('slider-nav__dot');

// перебираем в цикле все элементы из массива
for (var i = 0; i < dots.length; i++) {
  // ВНИМАНИЕ!!!!
  // создаем анонимную, само вызывающуюся функцию 
  // в качестве параметра ей передается i
  (function (index) {
    // ВНИМАНИЕ!!!!
    // внутри этой функции переданный ей i уже index. 
    // И если i на всех итерациях это одна и та же переменная с разными значениями
    // то переменная index является самостоятельной переменной, 
    // со своим уникальным значением в каждой итерации цикла 

    // создаем функцию-слушатель события "click"  она существует (ее время жизни) 
    // до тех пор пока не будет удалена из слушателей.
    // Внутри нее используется переменная  index объявленная вовне
    // создавая тем самым ЗАМЫКАНИЕ. То есть для каждой итерации цикла
    // переменная index не будет удалена после завершения итерации
    // а будет продолжать жить как замыкание пока жива функция-слушатель ее использующая
    dots[index].addEventListener("click", function () {
      console.log(index);
    })
  })(i);


}