https://habr.com/ru/post/524058/

• CSS
• JavaScript
• HTML

В кой-то веки, году в 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 в действии можно здесь.

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