Проблема с несколькими слайд-шоу Javascript на одной странице. ⇐ CSS

[Anonymous]

Я пытаюсь создать несколько слайд-шоу для работы с одним и тем же фрагментом кода JavaScript.

Вот мой HTML-код:

... ... ... ... ... ... ... ... Вот основной CSS:

.slider-container{ ширина: 50%; } .слайдер{ ширина: 100%; положение: родственник; отступ-дно: 75%; /* соотношение сторон 4/3 */ } .горка{ ширина: 100%; позиция: абсолютная; верх: 0; осталось: 0; непрозрачность: 0; переход: непрозрачность 0,5 с, легкость; } .slide:первый ребенок{ непрозрачность: 1; } а вот javascript:

const слайдерКонтейнер = document.querySelector(".slider-container"); const слайд = слайдерКонтейнер.querySelectorAll(".slide"); пусть currentSlide = 0; функция измененияСлайд() { слайд[currentSlide].style.opacity = 0; currentSlide = (currentSlide + 1) % слайд.длина; слайд[currentSlide].style.opacity = 1; } функция startSlider() { интервалId = setInterval (changeSlide, 2000); } функция stopSlider() { ClearInterval (идентификатор интервала); } начатьСлайдер(); слайдерКонтейнер.addEventListener("mouseenter", stopSlider); слайдерКонтейнер.addEventListener("mouseleave", startSlider); Этот JavaScript-скрипт хорошо подходит для одного слайд-шоу, но я не могу заставить работать более одного слайд-шоу на одной странице. В идеале я хотел бы сохранить один и тот же класс для всех слайд-шоу и, очевидно, заставить события входа/выхода мыши работать индивидуально для каждого из них. Любая помощь?