Написал скрипт для вертикального слайдера, но запнулся на том, что не могу понять, куда теперь вставить строку кода для добавления класса "active" для текущего слайдера. Remove поставил, а с add никак не могут разобраться. Может кто подскажет?
let activeIndex = 0,//Текущий слайд
sliderContainer = document.getElementById('vertical-slider'),//Контейнер слайдера
sliderItems = document.querySelectorAll('.main-slider-item'),//Псевдомассив слайдов
sliderPrev = document.querySelector('.vertical-slider__prev-btn'),//Стрелка вправо
sliderNext = document.querySelector('.vertical-slider__next-btn'),//Стрелка влево
timerVert;
//Основная функция слайдера
function changeSlide(n) {
if (n > sliderItems.length) {
//Возврат к первому слайду после перебора всего псевдомассива слайдов
activeIndex = 1;
};
if (n < 1) {
//Возврат в конец псевдомассива после перебора всего псевдомассива слайдов в оратном направлении
activeIndex = sliderItems.length;
};
//Установка видимости текущего слайда
sliderItems[activeIndex - 1].classList.add('active');
};
//Функции увеличения индекса активного слайда.
//Получают данные (n) из обработчика событий sliderPrev и sliderNext
function plusSlides(n) {
changeSlide(activeIndex += n);
};
function currentSlide(n) {
changeSlide(activeIndex = n);
};
//Переключение на один слайд назад по клику
sliderPrev.addEventListener('click', () => {
plusSlides(-1);
});
//Переключение на один слайд вперед по клику
sliderNext.addEventListener('click', () => {
plusSlides(1);
});
//Приостановка автоматического переключения слайдов
//при наведении курсора на контейнер (sliderContainer)
sliderContainer.addEventListener('mouseenter', (e) => {
clearInterval(timerVert);
});
//Возобновление автоматического переключения слайдов
//при выводе курсора за пределы контейнера (sliderContainer)
sliderContainer.addEventListener('mouseleave', (e) => {
timerVert = setInterval( () => {
sliderNext.click();
}, 3000);
changeSlide(activeIndex);
});
//Установка таймера автоматического переключения слайдов с интервалом в 3 секунды
timerVert = setInterval( () => {
sliderNext.click();
}, 3000);
//Запуск слайдера
changeSlide(activeIndex);
