Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Вертикальный слайдер (https://javascript.ru/forum/dom-window/75190-vertikalnyjj-slajjder.html)

DVV 11.09.2018 16:04

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

рони 11.09.2018 16:09

DVV,
делали б макет полностью

Dilettante_Pro 11.09.2018 16:12

Цитата:

Сообщение от DVV
Remove поставил, а с add никак не могут разобраться.

В представленном коде add есть, а remove отсутствует...

DVV 11.09.2018 16:20

Да, и тут я снова ошибся. Не пойму, куда remove, а не add поставить.

Nexus 11.09.2018 16:23

DVV, попробуйте подставить в 21 строку:
sliderItems.forEach(n=>n.classList.remove('active'));

рони 11.09.2018 16:36

DVV,
нормальный алгоритм:
сначала убрать класс затем изменить activeIndex

DVV 12.09.2018 12:54

Спасибо всем! Слайдер домучал:dance:


Часовой пояс GMT +3, время: 22:00.