Карусель изображений на JavaScript с таймером не работает

Оффтоп javascript
1

Привет всем! У меня возникла проблема с каруселью изображений на JavaScript. Я пытаюсь сделать так, чтобы слайды менялись автоматически через определенный интервал времени, но что-то идет не так.

Вот мой код для функции карусели:

function slideShow() {
  var slides = document.querySelectorAll('.slide-item');
  slides.forEach(slide => slide.style.display = 'none');
  
  slideIndex++;
  if (slideIndex > slides.length) slideIndex = 1;
  
  slides[slideIndex - 1].style.display = 'block';
  setTimeout(slideShow, 3000);
}

Я также добавил немного CSS для стилизации и HTML структуру. Но почему-то автоматическая смена слайдов не работает. Может кто-нибудь подсказать, что я делаю не так? Буду благодарен за любую помощь!

2

Проблема в том, что ты не инициализируешь slideIndex перед первым вызовом функции. Добавь let slideIndex = 0; перед функцией slideShow(). Еще советую использовать setInterval вместо setTimeout - это избавит от рекурсии и потенциальных проблем с памятью. И не забудь вызвать slideShow() после объявления, чтобы запустить карусель. С этими изменениями должно заработать как надо.

3

слушай, а ты не пробовал использовать requestAnimationFrame вместо setTimeout? это может сделать анимацию более плавной и эффективной. еще один момент - проверь, все ли картинки загружены перед запуском карусели. иногда из-за этого бывают глюки. и кстати, можно добавить проверку на наличие элементов перед выполнением кода, чтобы избежать ошибок если вдруг что-то не так с HTML. удачи с доработкой, у тебя обязательно получится!

4

А ты пробовал запускать slideShow() где-нибудь? Может, функция просто не вызывается. Еще советую проверить, правильно ли выбираются элементы через querySelectorAll. Возможно, класс slide-item не соответствует реальным классам в HTML. И кстати, лучше объявить slideIndex в глобальной области видимости, а не внутри функции. Удачи с отладкой!