Як зробити простий слайдер на JavaScript без JQuery

12

Від автора: при вивченні JS люди дуже часто шукають статті про те, як створити слайд шоу, карусель зображень, слайдер або ротатор. У цьому уроці ми: створимо простеньке слайд шоу без зовнішніх бібліотек типу JQuery; розберемо проблеми UX і доступності, а також моменти, коли варто використовувати слайд шоу, а коли ні; додамо елементи управління.

Головна перевага слайд-шоу без будь-яких бібліотек у їх продуктивності з-за маленького коду, такі слайд шоу можна використовувати де завгодно і не боятися, а підключені зовнішні файли.

Наш урок передбачає базові знання мови JavaScript: функції, подія кліка і зміна стилів. Я написав посібник про те, що й у якій послідовності варто вивчати в JavaScript, щоб швидко почати застосовувати отримані знання на практиці.

Створюємо просте слайд шоу

Нам знадобиться контейнер для слайдів і самі слайди. Ось так це буде виглядати:

  • Slide 1
  • Slide 2
  • Slide 3
  • Slide 4
  • Slide 5

Базові стилі повинні:

Задавати контейнер для слайдів

Розташовувати слайди один над іншим всередині контейнера

Визначати поведінку слайдів при появі й зникнення

Плавно змінювати прозорість для ефекту загасання і появи

Перш ніж дивитися в CSS не забудьте змінити класи і ідентифікатори, щоб не було конфліктів з вашими сайтами. У нашій статті імена класів і ідентифікаторів будуть короткими. Ось наш CSS:

/*
Первинні стилі:
З ними працює слайд шоу
*/
#slides {
position: relative;
height: 300px;
padding: 0px;
margin: 0px;
list-style-type: none;
}
.slide {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.showing {
opacity: 1;
z-index: 2;
}

Тепер можна додати стилі зовнішнього вигляду слайд шоу. Для нашого демо я використовував наступні стилі:

/*
Другорядні стилі:
Зовнішній вигляд; можете змінювати
*/
.slide {
font-size: 40px;
padding: 40px;
box-sizing: border-box;
background: #333;
color: #fff;
}
.slide:nth-of-type(1) {
background: red;
}
.slide:nth-of-type(2) {
background: orange;
}
.slide:nth-of-type(3) {
background: green;
}
.slide:nth-of-type(4) {
background: blue;
}
.slide:nth-of-type(5) {
background: purple;
}

JavaScript

JS виконує одну задачу: ховає поточний слайд і показує наступний. Для цього нам потрібно змінити назви класів слайдів. Ось наш JS код:

var slides = document.querySelectorAll(‘#slides .slide’);
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);
function nextSlide() {
slides[currentSlide].className = ‘slide’;
currentSlide = (currentSlide+1)%slides.length;
slides[currentSlide].className = ‘slide showing’;
}

Розберемося, що тут відбувається:

Перше, ми з допомогою querySelectorAll отримуємо всі слайди з контейнера.

Потім ми створюємо змінну для отримання поточного слайда.

В кінці ми задаємо інтервал в дві секунди для наступного слайда (2000ms).

Докладніше розберемо функцію nextSlide:

Ми міняємо клас для поточного слайда, щоб сховати його. Властивість transition автоматично обробляє плавне загасання.

Потім додаємо клас до поточного слайда. Ми використовуємо оператор % на випадок, якщо це був останній слайд, щоб повернутися до першого. Даний оператор відмінно підходить у випадках, коли необхідно виконувати математичні операції з циклами типу годинника та календаря. У нашому випадку 5 слайдів. Порахуємо всі числа: 1%5=1, 2%5=2, 3%5=3, 4%5=4, and 5%5=0.

Після отримання індексу слайда ми змінюємо клас і показуємо новий. І знову прозорість обробляється властивістю transition.

Ось і все, ми створили найпростіше слайд шоу. З приводу сумісності: Властивість transition не підтримується в IE9 і нижче, в такому випадку ефект загасання зміниться на звичайний різкий перехід до наступного слайда. Базове слайд шоу:

UX і доступність

Перш ніж використовувати слайд шоу визначитеся з його роллю на сторінці. Давайте розберемо, як слайд-шоу може вбити весь користувальницький досвід і доступність на сайті, якщо неправильно його використовувати.

Слайд-шоу може приховувати критичний контент

Якщо у вас на сайті є дуже важливий контент, його не можна ховати в слайд шоу. Не можна сподіватися на ідеальний збіг обставин, що користувач побачить саме потрібний слайд, не кажучи вже про доступність.

За дослідженням Університету Нотр-Дам тільки 1.07% людей клікають на контент в слайд шоу, а з цієї маленької частки людей тільки 3% клікають на інші слайди крім першого. Даний приклад показує небезпеку при розташуванні критичного вмісту в слайд шоу.

Користувач може неправильно зрозуміти основне завдання сайту

Ця проблема особливо гостро стоїть на сайтах з великими слайд шоу на домашніх сторінках. Якщо ви не можете точно визначитися, що показувати користувачам, як вони зрозуміють, що потрібно робити на вашому сайті?

Ваш сайт повинен бути абсолютно прозорим і зрозумілим, щоб не захотів зробити користувач. Якщо слайд шоу заважає цьому, може бути, варто переглянути стратегію даної сторінки.

Фірма по оптимізації конверсії WiderFunnel провела дослідження ефективності слайд шоу і прийшла до наступного висновку: «Ми протестували ротатори спеціальних пропозицій і з’ясували, що вони погано уявляють контент на домашній сторінці.»

Слайд-шоу може розсердити мобільних користувачів

Слайд-шоу може збільшити час завантаження та споживання даних на мобільних пристроях. Крім усього іншого управління такими ротаторами на екранах мобільних може бути вкрай незручно.

Коли застосовувати слайд шоу

Якщо врахувати всі потенційні проблеми, то коли ж все-таки потрібно використовувати слайд шоу? Ось кілька порад.

Створення загального враження

Якщо вам байдуже, чи побачить користувач усі слайди, і ви хочете просто створити загальне гарне візуальне враження, то можна використовувати слайд шоу. У такому випадку навіть якщо користувач не побачить інших слайдів, нічого страшного він не упустить.

Коли до контенту легко отримати доступ з іншого місця

Наприклад, ви хочете показати фотографії будь-якого курорту, події або товару в слайд шоу, а на сайті вже є галерея в іншому місці. У такому випадку можна використовувати слайд шоу.

При використанні техніки прогресивного поліпшення

Більш загальний випадок, але акуратний слайдер не повинен викликати якихось проблем або сильно вплинути на функціональність сайту. Поки слайдер залишається лише доповненням, яке можна в будь-який момент прибрати, і не критична конструкції сайту, його можна використовувати.

Поради щодо доступності

Якщо контент в слайдері дуже важливий, і його потрібно зробити доступним, гарненько подумайте про місце розташування слайдера. Якщо ви або ваші клієнти наполягаєте на слайдері, то вам варто прочитати цю чудову статтю про доступність.

Зі статті: «Для створення доступного слайдера необхідно дотримати 5 умов:

Користувач повинен бути здатний зупинити будь-який рух

Необхідно створити видимі елементи управління, доступні через клавіатуру, мишу і тачскрін

Забезпечити правильний порядок фокусування в слайдері

Валідний код та стилі

Надати зрозумілу альтернативу слайдеру»

Також один із користувачів в коментарях дав посилання на корисний ресурс, який допоможе вирішити, чи потрібен вам слайдер чи ні. Ми додамо нашому слайдеру елементи управління, щоб зробити його більш доступним.

Додаємо елементи управління в слайдер

Пора додати кнопку паузи, наступний слайд і попередній слайд. Кнопка паузи. Спершу, додайте кнопку у HTML:

Pause

Потім додайте цей код JS:

var playing = true;
var pauseButton = document.getElementById(‘pause’);
function pauseSlideshow() {
pauseButton.innerHTML = ‘Play’;
playing = false;
clearInterval(slideInterval);
}
function playSlideshow() {
pauseButton.innerHTML = ‘Pause’;
playing = true;
slideInterval = setInterval(nextSlide,2000);
}
pauseButton.onclick = function() {
if(playing) {
pauseSlideshow();
} else {
playSlideshow();
}
};

Що відбувається в скрипті:

Змінна playing зберігається в моменти, коли слайдер активний.

Кнопку паузи ми занесли в змінну pauseButton, щоб потім не шукати її по документу.

Функція pauseSlideshow зупиняє слайдер, а в кнопку паузи записує «Play».

Функція playSlideshow запускає слайдер, а в кнопку Play записує Pause.

В кінці ми вішаємо обробник кліка, щоб кнопка play/pause могла ставити слайдер на паузу і запускати його.

Ось так працює наш слайдер з кнопкою паузи:

Кнопки наступний і попередній

Спочатку додайте кнопки Next і Previous в HTML:

Previous
Next

В JavaScript змініть функцію:

function nextSlide() {
slides[currentSlide].className = ‘slide’;
currentSlide = (currentSlide+1)%slides.length;
slides[currentSlide].className = ‘slide showing’;
}

…на:

function nextSlide() {
goToSlide(currentSlide+1);
}
function previousSlide() {
goToSlide(currentSlide-1);
}
function goToSlide(n) {
slides[currentSlide].className = ‘slide’;
currentSlide = (n+slides.length)%slides.length;
slides[currentSlide].className = ‘slide showing’;
}

Для більшої гнучкості в скрипті вище ми додали загальну функцію goToSlide. Також щоб не отримати від’ємне значення, ми трохи змінили спосіб обчислення змінної currentSlide. Для тесту ви можете замінити slides.length на своє число і подивитися, що потрапить в currentSlide зі зміною значення n. Додайте код нижче в скрипт, щоб кнопки почали працювати:

var next = document.getElementById(‘next’);
var previous = document.getElementById(‘previous’);
next.onclick = function() {
pauseSlideshow();
nextSlide();
};
previous.onclick = function() {
pauseSlideshow();
previousSlide();
};

Тепер у нас є що працюють кнопки управління слайдером! Ось так може виглядати слайдер з кнопками управління і парочкою стилів:

Зверніть увагу, щоб автопроигрывание не завадило перемикання між слайдами, ми ставимо його на паузу, коли користувач клацає на кнопку Next і Previous. Кнопки управління доступні на клавіатурі автоматично, так як це звичайні HTML теги.

Можете змінювати стилі і переміщати кнопки в будь-яке місце, головне, щоб вони були добре видні і працювали. Якщо ви хочете додати перемикання по слайдеру з допомогою стрілок на клавіатурі, то відключайте цю функцію, якщо користувач використовує стрілки явно не на слайдері – приміром, в текстовому полі.

Фолбэк на випадок якщо JavaScript недоступний

Бувають випадки, коли JavaScript не зміг завантажитися, відключений, не підтримується пристроєм і т. д. В ідеалі користувач навіть у таких випадках отримає щось працююче. Який фолбэк ви створите залежить від вас. Можна показувати тільки перше зображення або ж все списком.

Якщо основне завдання слайдера це справити хороше загальне враження, тоді набагато важливіше зберегти макет сторінки, ніж показувати всі зображення. У таких випадках можна показувати тільки перше зображення. Якщо ж потрібно показати всі зображення, тоді їх можна відобразити списком. Розглянемо обидва випадки.

Ховаємо кнопки якщо JavaScript недоступний

Ховайте кнопки за допомогою CSS за замовчуванням.

.controls {
display: none;
}

Потім показуйте їх за допомогою JS. Так, користувач побачить тільки кнопки, якщо JS активний.

var controls = document.querySelectorAll(‘.controls’);
for(var i=0; iКод вище пробігається в циклі по кнопках і показує їх.

Показуйте зображення списком коли JavaScript недоступний

Спершу, поміняйте в класі .slide position: absolute; position: static;. Так слайди будуть показуватися списком за замовчуванням.

Потім додайте JS код і пробегайтесь в циклі по слайдах і міняйте їх позиціонування на абсолютне (цей код обов’язково повинен бути після визначення змінної slides):

for(var i=0; iУ такому разі слайди не будуть відображатися списком, якщо доступний JS.

Висновок

Ми розібрали, як створити простий слайдер, як вирішити деякі UX проблеми та доступності, а також як створити кнопки управління.

Висновок зі статті: перш ніж вставляти що-небудь на сторінку, подумайте про те, як це вплине на власний досвід, а також допоможе це досягти основної задачі сайту. Якщо ви не можете дати чіткої відповіді, може бути, не варто додавати слайдер на сторінку.

А ви що думаєте? Є у вас які-небудь хороші історії про слайдерах? Чи погані? Забавні? Пишіть про це в коментарях.