Элементарный автоматический слайдер на основе библиотеки RevolveR :: 10 строчек кода

В кой-то веки, году в 2013, я постепенно перестал использовать jQuery в пользу native ECMAScript. У меня ни осталось ни каких инструментов, сахарного API и нужных в повседневной верстке плагинов. Создавать код библиотеки пришлось с самого нуля и она постепенно обзавелась всем необходимым для быстрой и комфортной работы. У меня не было даже слайдера, а идея не брать jQuery и любые другие библиотеки привела к созданию своей кодовой микро базы.

Самый простой и маленький в мире слайдер

Я, как верстальщик на то время, прекрасно понимал как работают плагины и неоднократно ковырял front-end пытливым умом, пытаясь добиться минификации кода и оптимизации работы с CSS или той же версткой.

Слайдер родился после нескольких экспериментов с z-index и, на мое удивление, программа составила всего 10 строчек. Я не стал трансформировать изображения в background-image и оставил возможность листать даже блоки верстки.

Вот HTML код контейнера сцены:

<figure> 	<img src="./graphics/R-1.png" alt="RevolveR Labs" /> 	<img src="./graphics/R-2.png" alt="RevolveR Labs" /> 	<img src="./graphics/R-3.png" alt="RevolveR Labs" /> 	<img src="./graphics/R-4.png" alt="RevolveR Labs" /> </figure> 

Добавим CSS, который сгрузит теги изображений в одну колоду по X:0 и Y:0(top: 0px и left:0px):

figure {  	background: repeating-linear-gradient(45deg, transparent, transparent .1vw, #ffffff45 .1vw, #b7754594 .25vw), linear-gradient(to bottom, #eeeeee5c, #bfbfbf1a); 	box-shadow: inset 0 0 1vw #000; 	outline: .2vw solid #b1917fbd; 	border: .1vw dashed #999; 	display: inline-block; 	text-align: center; 	position: relative; 	overflow: hidden; 	margin: 0 auto; 	width: 36.46vw; 	height: 22vw;  }  	figure img {  		position: absolute; 		width: 36.46vw; 		height: 22vw; 		opacity: 1; 		left: 0; 		top: 0;  	} 

Я уже не использую в верстке статические величины такие как PX из-за появления мониторов 8К и более, а делаю все на масштабируемых единицах view port что позволяет мне избежать лестниц на media-queries и дизайнить интерфейсы под любые разрешения экранов.

Теперь напишем обработчик JavaScript, который будет просто листать колоду без каких либо эффектов с временным интервалом:

var e = document.querySelectorAll('figure img'); let i = 0;  void setInterval(() => {  		if(e) {  			e[i].style.zIndex = 0;   			i++;  			i = (i - 0) === e.length ? 0 : i - 0;  			e[i].style.zIndex = 1;  		}  	}, 3000);  

Мы используем setInteval проваливающийся в вакуум при инициализации на 3 секунды и реализуем сбрасываемый итератор на псевдо цикле. При каждом следующем тиканьи таймера меняем z-index нужного изображения по порядку. Происходит постоянный сброс z-index предыдущего изображения на 0, а текущий элемент цикла выходит на передний план за счет установки z-index в положение 1.

Все. Самый простой в мире и малогабаритный слайдер готов, надежный и элементарный как автомат Калашникова. Теперь вся колода тикает и текущий элемент псевдо цикла выходит на первый план. Работает это все без third party на чистом JavaScript.

Добавим эффектов

Rotor(так я его назвал) вышел слишком простяцкий и мне захотелось добавить каких-то эффектов перехода. Для этого уже приходится зайдействовать библиотеку умеющую анимации CSS с клевыми easing эффектами(их в RevolveR целых 43).

Вот листинг:

let launch = RR.browser;  RR.allowSlide = true;  var e = RR.sel('figure img')  let i = 0;  void setInterval(  	() => {  		if( e && RR.allowSlide ) {  			RR.animate([ e[ i ] ], ['opacity:0:800:lienar'], () => {  				e[ i ].style.zIndex = 0;  				i++;  				i = (i - 0) === e.length ? 0 : i - 0;  				RR.animate([ e[ i ] ], ['opacity:.8:800:swingTo'], () => {  					e[ i ].style.zIndex = 1;  				});  			});  		}  	},   3000); 

Здесь реализована последовательность callback на завершение состояния анимации, которая суммарным временем умещается во время типа таймера setInterval и мы получаем классные переходы с затуханием и проблеском.

Все прекрасно, но мы еще добавим задержку перелистывая флагом, когда pointer указатели мыши находится над сценой:

RR.event('figure img', 'mouseenter', () => {  	RR.allowSlide = null;  	RR.event('figure img', 'mouseleave', () => {  		RR.allowSlide = true;  	});  }); 

Rotor by RevolveR Labs в действии

Посмотреть Rotor в действии можно здесь.

Как вы видите кода здесь тоже не так и много и можно реализовать более сложные и интересные эффекты. Но это уже на ваше усмотрение.