Не работает функция 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);