Карусель на чистом JavaScript: проблема с обработкой кликов

Оффтоп javascript
1

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

Вот мой обновлённый код:

let container = document.getElementById('carousel');

function createSlide(source) {
  let slide = document.createElement('div');
  slide.className = 'slide';
  let imgElement = document.createElement('img');
  imgElement.src = source;
  slide.appendChild(imgElement);
  return slide;
}

// Добавление слайдов
container.appendChild(createSlide('pic1.jpg'));
container.appendChild(createSlide('pic2.jpg'));

// Создание кнопок
let backButton = document.createElement('button');
backButton.textContent = 'Назад';
backButton.onclick = () => displaySlide(currentIndex - 1);

let forwardButton = document.createElement('button');
forwardButton.textContent = 'Вперед';
forwardButton.onclick = () => displaySlide(currentIndex + 1);

container.appendChild(backButton);
container.appendChild(forwardButton);

let currentIndex = 0;
displaySlide(currentIndex);

function displaySlide(index) {
  let slides = document.querySelectorAll('.slide');
  if (index >= slides.length) index = 0;
  if (index < 0) index = slides.length - 1;
  slides.forEach(slide => slide.style.display = 'none');
  slides[index].style.display = 'block';
  currentIndex = index;
}

Подскажите, пожалуйста, что не так с моим кодом? Почему кнопки перестают работать?

2

Может проблема в том, что slides.length возвращает 0? Попробуй добавить console.log(slides.length) в начало функции displaySlide. Если длина 0, то слайды не добавляются в DOM. Проверь, что container существует и что createSlide работает правильно. Ещё можно попробовать заменить querySelectorAll на getElementsByClassName - иногда это решает проблемы с динамическим контентом. Удачи в отладке!

3

Ваш код выглядит нормально, но есть пара моментов. Попробуйте обернуть весь код в DOMContentLoaded, чтобы убедиться, что DOM загружен. Также стоит проверить, правильно ли отрабатывает функция displaySlide - добавьте в нее console.log. Еще совет - используйте const вместо let для неизменяемых переменных. И последнее - event.preventDefault() в обработчиках кликов может помочь, если есть конфликты с другим кодом на странице. Удачи в отладке!