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

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

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

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

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

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

Вот как будет выглядеть ядро CSS :

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

JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Следующий код галереи JavaScript.

… измените на этот:

В приведенном выше скрипте мы для большей гибкости добавили общую функцию goToSlide . Мы также изменили математику внутри переменной currentSlide , чтобы исключить отрицательные числа. Чтобы проверить себя, выберите число для slides.length и посмотрите, что произойдет с currentSlide после n изменений.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

Дайте знать, что вы думаете по этой теме статьи в комментариях. За комментарии, дизлайки, подписки, лайки, отклики низкий вам поклон!

📎📎📎📎📎📎📎📎📎📎