В этой статье мы рассмотрим следующие вопросы:

• создание галереи JavaScript без использования внешних библиотек, таких как JQuery;
• понимание проблем UX и доступности; в том числе, следует ли использовать слайд-шоу вообще;
• добавление элементов управления слайд-шоу.

Если не использовать библиотеки, то страница работает лучше (в связи с меньшим количеством кода), и можно располагать созданное слайд-шоу в любом месте, не беспокоясь о загрузке дополнительных файлов.

HTML

В HTML нам понадобится контейнер для слайдов, а также сами слайды. Вот как это будет выглядеть:

<ul id="slides">
    <li class="slide showing">Slide 1</li>
    <li class="slide">Slide 2</li>
    <li class="slide">Slide 3</li>
    <li class="slide">Slide 4</li>
    <li class="slide">Slide 5</li>
</ul>

CSS

В коде CSS галереи для сайта JavaScript нам нужно реализовать следующее:

• определить контейнер для слайдов;
• расположить слайды в контейнере друг над другом;
• определить, как слайд должен выглядеть, когда он отображается или скрывается;
• задать переход непрозрачности для эффекта смены слайдов.

Вот как будет выглядеть ядро 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;
}

Далее нужно добавить стили, которые определяют внешний вид простой галереи JavaScript. Я использовал следующие:

/*
дополнительные стили:
внешний вид вы можете изменить по своему усмотрению
*/
.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

Основная задача JavaScript - скрыть текущий слайд и показать следующий. Для достижения этого нужно изменить классы слайдов.

Программный код галереи JavaScript:

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';
}

Разберемся, как работает этот код:

1. Мы используем querySelectorAll, чтобы получить слайды из контейнера;
2. Далее мы устанавливаем переменную для отслеживания текущего слайда;
3. Затем мы задаем интервал, чтобы выводить каждый следующий слайд через две секунды (2000 мс).

Давайте более глубоко рассмотрим то, что происходит внутри функции nextSlide:

• Мы изменяем класс текущего слайда, чтобы он не отображался в JavaScript галерее изображений. CSS свойство transition автоматически обрабатывает постепенное скрытие слайда;
• После этого мы добавляем класс к текущему слайду. Но при этом используем оператор %, чтобы вернуться обратно к началу, если достигнут последний слайд. Напоминаю, что оператор % делит два числа и возвращает остаток. Это востребовано для реализации такого функционала, как часы или календарь;
• После того, как мы получили номер нового слайда, мы изменяем его класс, чтобы слайд отображался. CSS свойство transition автоматически обрабатывает эффект исчезновения.

Теперь у нас есть базовое слайд-шоу.

Примечание по совместимости:

CSS переходы не поддерживаются в IE версии 9 и ниже. В этих браузерах вместо эффекта растворения слайд-шоу будет плавно исчезать, показывая следующий слайд.

Вот наша базовая JavaScript галерея фотографий в действии:

Посмотреть пример

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

Рассмотрим, как слайд-шоу может ухудшить опыт взаимодействия пользователя и доступность сайта.

Слайд-шоу может скрыть важный контент

Важная информация не должна выводиться через слайд-шоу. По данным исследования Университета Нотр-Дам, только 1,07% пользователей кликают по какому либо элементу слайд-шоу. И из этих 1,07% только небольшая часть, (3% или меньше), кликает по какому-либо слайду, кроме первого. Это иллюстрирует, насколько опасно размещать важный контент в слайд-шоу.

Пользователь может получить искаженное представление о главной цели сайта

Ваш сайт должен предоставлять пользователю четкий и очевидный путь к тому, что он должен сделать. И если слайд-шоу мешает этому, вам нужно пересмотреть стратегию для этой страницы.

Специалисты компании WiderFunnel, занимающаяся оптимизацией конверсии, проверили эффективность демонстрации слайдов, и пришли к следующему выводу:

Мобильные пользователи могут быть не в восторге

Галерея для сайта JavaScript может увеличить время загрузки данных на мобильных устройствах. Это в дополнение к тому, что создавать элементы управления для мобильных каруселей намного сложнее.

Когда использовать слайд-шоу

Когда же на самом деле стоит отображать слайд-шоу? Вот некоторые предложения.

Создание общего впечатления

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

Когда к контенту легко получить доступ и без слайд-шоу

Например, чтобы отобразить фотографии курорта, музея, события или линейки продуктов в виде слайд-шоу. Но если на сайте есть фотогалерея или раздел товаров. В этом случае вполне целесообразно использовать слайд-шоу.

Для общего улучшения качества сайта

Использовать слайд-шоу как аккуратный визуальный элемент, который не имеет решающего значения для функционала сайта. До тех пор, пока это дополнение не отвлекает внимание от важного контента, все в порядке.

Указатели для увеличения доступности

Существует пять принципов, которым нужно следовать, чтобы обеспечить доступность галереи JavaScript:

1. Дать пользователю возможность остановить слайд-шоу в любой момент;
2. Создать видимые элементы управления;
3. Обеспечить правильный и понятный порядок фокусировки слайд-шоу;
4. Валидный код и таблицы стилей;
5. Создать равнозначную альтернативу слайд-шоу.

Чтобы слайд-шоу стало более доступным, мы добавим ряд элементов управления.

Добавление элементов управления слайд-шоу

Пришло время добавить в скрипт галереи JavaScript кнопку "Пауза / Проигрывать", кнопку "Следующий" и кнопку "Предыдущий".

Кнопка «Пауза / Проигрывать»

Во-первых, добавим кнопку в HTML:

<button class="controls" id="pause">Pause</button>

Затем добавим следующий код JavaScript:

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();
  }
};

Вот что делает этот скрипт галереи JavaScript:

• Переменная playing хранит информацию, проигрывается ли слайд-шоу.
• Мы храним кнопку паузы в переменной, поэтому нам не нужно искать ее.
• Функция pauseSlideshow приостанавливает проигрывание слайд-шоу и заменяет кнопку “Pause” кнопкой "Play".
• Функция playSlideshow возобновляет проигрывание слайд-шоу и заменяет кнопку "Play" кнопкой “Pause”.
• Мы добавляем обработчик клика, чтобы кнопка Play/Pause переключала режимы паузы и проигрывания слайд-шоу.

Вот как слайд-шоу будет работать с кнопкой паузы:

Посмотреть пример

Кнопки «Следующий» и «Предыдущий»

Сначала добавьте в HTML кнопки "Next" и "Previous":

<button class="controls" id="previous">Previous</button>
<button class="controls" id="next">Next</button>

Следующий код галереи 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 изменений.

Теперь добавьте этот код, чтобы кнопки галереи для сайта JavaScript делали то, что нам нужно:

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

Теперь у нас есть рабочие элементы управления.

Вот как выглядит слайд-шоу с элементами управления и некоторыми дополнительными стилями:

Посмотреть пример

Обратите внимание, что мы приостанавливаем проигрывание JavaScript галереи изображений, когда пользователь нажимает кнопку “Next” или “Previous”, чтобы его самостоятельная навигация по слайдам не была изменена автоматическим проигрыванием.

Также можно попробовать изменить стили и расположение элементов управления, чтобы их назначение было предельно понятно пользователям.

Резервный вариант для тех случаев, когда JavaScript не доступен

Иногда JavaScript не удается загрузить, он выключен, не поддерживается устройством и так далее. В идеале, пользователь должен иметь возможность что-то получить даже в таких ситуациях.

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

Скрыть элементы управления, когда JavaScript не доступен

Используйте CSS, чтобы по умолчанию скрыть элементы управления простой галереи JavaScript:

.controls {
    display: none;
}

Затем примените JavaScript, чтобы отобразить элементы управления. Таким образом, пользователь будет видеть элементы управления только в том случае, когда JavaScript подключен:

var controls = document.querySelectorAll('.controls');
for(var i=0; i<controls.length; i++){
    controls[i].style.display = 'inline-block';
}

Приведенный выше код галереи для сайта JavaScript обрабатывает через цикл каждый из элементов управления и делает их видимыми.

Вывод изображений в виде списка, когда JavaScript не доступен

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

Затем добавьте в JavaScript цикл, чтобы обработать каждый слайд и изменить значение свойства position на absolute. Этот код нужно поместить после определения переменной slides:

for(var i=0; i<slides.length; i++) {
    slides[i].style.position = 'absolute';
}

Благодаря этому, если JavaScript доступен, слайды не будут выводиться в виде списка.

Заключение

Отдельно я хотел бы подчеркнуть следующее: когда вы размещаете какой-то элемент на странице, подумайте, как это повлияет на юзабилити и как это поможет в достижении главной цели сайта.

Перевод статьи «Make a Simple JavaScript Slideshow without jQuery» был подготовлен дружной командой проекта Сайтостроение от А до Я.