Не работает функция javascript с адаптивными версиями сайта

я загрузила сайт на хостинг (просто как тренировка). И функция, отвечающая за передвижение слайдов у слайдера перестала работать нормально. Я сделала несколько версий для разных экранов, то есть если ширина экрана такая-то, слайд сдвигается на столько-то. Но на всех устройствах теперь срабатывает только самая первая версия, для десктопов. Хотя на самом компьютере, до загрузки на хостинг, все работало нормально. Подскажите, пожалуйста, с чем это может быть связано? Ссылка на сайт https://nachivot.ru/

Код слайдера

function goToSlide(slide) {
  const windowWidth = window.innerWidth;

  if (windowWidth > 1198) {
    slides.forEach(function (s) {
      s.style.transform = `translateX(${400 * -slide}px)`;
      if (slide == 0) {
        blackLine.style.transform = `translateX(0px)`;
      }
      if (slide == 1) {
        blackLine.style.transform = `translateX(51px)`;
      }
      if (slide == 2) {
        blackLine.style.transform = `translateX(100px)`;
      }
    });
  }
  if (windowWidth <= 1198 && windowWidth > 990) {
    slides.forEach(function (s) {
      s.style.transform = `translateX(${333 * -slide}px)`;
      if (slide == 0) {
        blackLine.style.transform = `translateX(0px)`;
      }
      if (slide == 1) {
        blackLine.style.transform = `translateX(51px)`;
      }
      if (slide == 2) {
        blackLine.style.transform = `translateX(100px)`;
      }
    });
  }
  if (windowWidth <= 990 && windowWidth > 767) {
    slides.forEach(function (s) {
      s.style.transform = `translateX(${247 * -slide}px)`;
      if (slide == 0) {
        blackLine.style.transform = `translateX(0px)`;
      }
      if (slide == 1) {
        blackLine.style.transform = `translateX(57px)`;
      }
      if (slide == 2) {
        blackLine.style.transform = `translateX(110px)`;
      }
    });
  }
  if (windowWidth <= 767 && windowWidth > 574) {
    slides.forEach(function (s) {
      s.style.transform = `translateX(${290 * -slide}px)`;
      if (slide == 0) {
        blackLine.style.transform = `translateX(0px)`;
      }
      if (slide == 1) {
        blackLine.style.transform = `translateX(35px)`;
      }
      if (slide == 2) {
        blackLine.style.transform = `translateX(75px)`;
      }
      if (slide == 3) {
        blackLine.style.transform = `translateX(110px)`;
      }
    });
  }
  if (windowWidth <= 574) {
    slides.forEach(function (s) {
      s.style.transform = `translateX(${331 * -slide}px)`;
      if (slide == 0) {
        blackLine.style.transform = `translateX(0px)`;
      }
      if (slide == 1) {
        blackLine.style.transform = `translateX(45px)`;
      }
      if (slide == 2) {
        blackLine.style.transform = `translateX(90px)`;
      }
      if (slide == 3) {
        blackLine.style.transform = `translateX(135px)`;
      }
      if (slide == 4) {
        blackLine.style.transform = `translateX(180px)`;
      }
    });
  }
}
window.addEventListener("resize", goToSlide);

goToSlide(0);

function nextSlide() {
  const windowWidth = window.innerWidth;
  if (windowWidth <= 767 && windowWidth > 574) {
    if (currSlide === 3) {
      console.log(currSlide);
      currSlide = 0;
    } else {
      currSlide++;
    }
    goToSlide(currSlide);
  } else if (windowWidth <= 574) {
    if (currSlide === 4) {
      console.log(currSlide);
      currSlide = 0;
    } else {
      currSlide++;
    }
    goToSlide(currSlide);
  } else {
    if (currSlide === 2) {
      currSlide = 0;
    } else {
      currSlide++;
    }
    goToSlide(currSlide);
  }
}

function prevSlide() {
  const windowWidth = window.innerWidth;
  if (windowWidth <= 767 && windowWidth > 525) {
    if (currSlide === 0) {
      currSlide = 2;
    } else {
      currSlide--;
    }
    goToSlide(currSlide);
  } else if (windowWidth <= 525) {
    if (currSlide === 0) {
      currSlide = 4;
    } else {
      currSlide--;
    }
    goToSlide(currSlide);
  } else {
    if (currSlide === 0) {
      currSlide = 2;
    } else {
      currSlide--;
    }
    goToSlide(currSlide);
  }
}

btnRight.addEventListener("click", nextSlide);

btnLeft.addEventListener("click", prevSlide);

Ответы (0 шт):