Событие щелчка на ползунке идет в конец массива

let current = 0;

function nextSlide(slide) {
      if (current < slidesCount) {
        slidesContainer.style.transform = 'translateX(-' + (slide * slideWidth) + 'px)';
        current++;
      }
}

Причина, по которой он пропускается до конца при каждом нажатии: цикл for(). Вы циклически проходите через все слайдов, создавая новую translateX координату при каждом проходе — по клику каждый. Оставляя вас с последним значением каждый раз.

Ответ, который дал ДешевыйГеймер, определяет шаблон, позволяющий избежать ловушки цикла for(), отслеживая текущий индекс «слайда» за пределами обработчика nextSlide().

let current = 0; // <- independent index reference

function nextSlide(slide) {
      if (current < slidesCount) {
        slidesContainer.style.transform = 'translateX(-' + (current * slideWidth) + 'px)';
        current++;  // <- increment the index
      }
}
// I changed the `slide` reference in `(slide * slideWidth)` to `current`  to reflect the intent of the code

Это позаботится о том, чтобы вы увеличивались в карусели до тех пор, пока current не станет равным 3. (Аргумент slide в nextSlide(slide) необязателен.)

Возможно, я не совсем понимаю, что вы пытаетесь сделать или почему вы собираетесь использовать цикл for, но если речь идет просто о выборе следующего слайда, вы можете использовать это:

var currentSlide = 0;

function nextSlide() {
  //make sure currentSlide is in range
  currentSlide = (currentSlide >= slidesCount) ? 0 : ++currentSlide;

  slidesContainer.style.transform = 'translateX(-' + (currentSlide * slideWidth) + 'px)';
}

nextButton.addEventListener('click', nextSlide);

или немного более гибкий:

var currentSlide = 0;

function nextSlide(direction /* Number */) {
  if (!direction) direction = 1; //default

  setSlide(currentSlide + direction % slidesCount);
}

function setSlide(index) {
  if (index === currentSlide) return;

  //make sure index is in range
  while(index >= slidesCount) index -= slidesCount;
  while(index < 0) index += slidesCount;

  slidesContainer.style.transform = 'translateX(-' + (index * slideWidth) + 'px)';

  currentSlide = index;
}

nextButton.addEventListener('click', function() {
  nextSlide(this.dataset["direction"]); //by using data you don't need two different button classes
});

Но если вы настаиваете на использовании цикла, я боюсь сказать, что это неуместно в данном случае, поскольку вычисление translateX основано на заданном значении.