Создаем простое JavaScript слайд-шоу без использования JQuery

Создание легкого слайдера без сторонних библиотек позволяет сосредоточиться на UX и доступности. Такой подход упрощает работу с контентом и ускоряет загрузку страницы.

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

Обновлено: 2023-09-04 13:26:47 Вадим Дворниковавтор материала

Базовое слайд-шоу

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»