Показать сообщение отдельно
  #1 (permalink)  
Старый 11.09.2018, 16:04
DVV DVV вне форума
Кандидат Javascript-наук
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 125

Вертикальный слайдер
Написал скрипт для вертикального слайдера, но запнулся на том, что не могу понять, куда теперь вставить строку кода для добавления класса "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);
Ответить с цитированием