Почему не правильно работает слайдер?

Question

[TtT RrR]

Писал слайдер с применением js из видео, всё вроде соответствует с первоисточником, но при нажатий на стрелку вправо, сначала меняется текст, после второго нажатия меняется изображение и текст. Почему-то класс вставляется для сперва текста. Если нажать стрелку влево, то меняется первое изображение на второе, за место третьего, а текст меняется корректно.
Также не работают точки, на них вообще не добавляются активные классы.
Сайт:
https://talantrys.github.io/Scake/
GitHub:
https://github.com/TalantRys/Scake
Slick Slider не использую, забыл удалить
Код слайдера в script.js:

//СЛАЙДЕР
//-ИЗОБРАЖЕНИЯ
const sliderImage = document.querySelector('.slider__image');
const slides = sliderImage.getElementsByTagName('img');
var i = 0;

function prevSlide() {
  slides[i].classList.remove('active');
  i = (i - 1 + slides.length) % slides.length;
  slides[i].classList.add('active');
}
function nextSlide() {
  slides[i].classList.remove('active');
  i = (i + 1) % slides.length;
  slides[i].classList.add('active');
}
//-ТЕКСТ
const sliderBody = document.querySelector('.slider__body');
const slidesText = sliderBody.getElementsByClassName('slider__text');
var j = 0;

function prevSlideText() {
  slidesText[j].classList.remove('active');
  j = (j - 1 + slidesText.length) % slidesText.length;
  slidesText[j].classList.add('active');
}
function nextSlideText() {
  slidesText[j].classList.remove('active');
  j = (j + 1) % slidesText.length;
  slidesText[j].classList.add('active');
}
//-ТОЧКИ
const sliderControls = document.querySelector('.slider__controls');
const dots = sliderControls.querySelectorAll('.slider__dots');
var sliderNav = function (manual) {
  dots.forEach((dot) =>{
    dot.classList.remove('active');
  });
  slides.forEach((slide)=>{
    slide.classList.remove('active');
  });
  slidesText.forEach((text)=>{
    text.classList.remove('active');
  })
  dots[manual].classList.add('active');
  slides[manual].classList.add('active');
  slidesText[manual].classList.add('active');
}
dots.forEach((dot, k) => {
  dot.addEventListener('click', () => {
    sliderNav(k);
  });
});

Comments

[WapSter]

Правила ресурса прочти

[Daniil]

Нужно код не в виде картинки , а в виде текста отправить , чтобы мы могли его скопировать , вставить и посмотреть как он работает.

[TtT RrR]

WapSter, Daniil, отредактировал

[Сергей Сергей]

в самом начале i == 2.
dots пуст.

[TtT RrR]

Сергей Сергей, dots пуст имеете ввиду переменная k=0 не указано? а я вообще правильно обращаюсь к точкам в html?

[Сергей Сергей]

"Пуст" — это пуст, там нет элементов, чтобы перебирать.

[TtT RrR]

Сергей Сергей, при поиске точек не указал в скобках перед классом точку, теперь класс active убирается, но повторно на других точках не появляется, картинки и текст не меняются, всплывает ошибка:

const sliderControls = document.querySelector('.slider__controls');
const dots = sliderControls.querySelectorAll('.slider__dots');