Как создать простое полноэкранное слайд-шоу с помощью Vanilla JavaScript

Как создать простое полноэкранное слайд-шоу с помощью Vanilla JavaScript

От автора: в этом руководстве вы узнаете, как создать адаптивное полноэкранное слайд-шоу с помощью обычного JavaScript. Чтобы построить его, мы используем несколько различных трюков с интерфейсом. В качестве бонуса мы пойдем на шаг дальше и настроим внешний вид курсора при наведении его на слайд-шоу.

Как обычно, чтобы получить первоначальное представление о том, что мы будем создавать, взгляните на соответствующую демонстрационную версию CodePen (посмотрите более крупную версию для лучшего понимания):

Примечание. В этом руководстве не рассматривается, как сделать слайд-шоу более доступным (например, кнопки). В основном мы сосредоточимся на CSS и JavaScript.

1. Начните с разметки страницы

Для создания слайд-шоу нам понадобится элемент с классом slideshow. В нем мы разместим список слайдов вместе со стрелками навигации.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

По умолчанию отображается первый слайд. Но мы можем настроить это поведение, прикрепив к нужному слайду класс is-active. Вот необходимая разметка:

2. Определите стили

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

Компоновка слайдов

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

Каждый div внутри слайда получит свой класс cover. Это преобразует его фоновое изображение в полноэкранное фоновое изображение:

Навигация

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

Как создать простое полноэкранное слайд-шоу с помощью Vanilla JavaScript

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

Как создать простое полноэкранное слайд-шоу с помощью Vanilla JavaScript

По умолчанию цвет этих стрелок будет черным. Однако при перемещении курсора внутри слайд-шоу их цвет должен измениться и создать контраст по отношению к слайд-изображениям. Хитрость для создания этого эффекта заключается в добавлении к спанам mix-blend-mode: difference (или exclusion) и filter: invert(1).

Как создать простое полноэкранное слайд-шоу с помощью Vanilla JavaScript

Далее, стили для навигации:

3. Добавьте JavaScript

Давайте теперь добавим к нашему слайд-шоу интерактивные функции! В этом примере в слайд-шоу будут включены три параметра по умолчанию, которые мы можем настроить, указав соответствующие настраиваемые атрибуты:

Параметр: autoplay. Значение по умолчанию: false. Описание: Функция автопроигрывания.

Параметр: autoplay-interval. Значение по умолчанию: 4000. Описание: Интервал времени между переключением слайдов в миллисекундах.

Параметр: stop-autoplay-on-hover. Значение по умолчанию: false. Описание: Остановить режим автопроигрывания при наведении.

Переменные

Прежде чем приступить к изучению этих параметров, в качестве первого шага мы определим группу переменных, которые будем использовать позже:

Инициализация вещей

Когда все ресурсы страницы будут готовы, мы вызовем функцию init.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Эта функция запустит четыре подфункции:

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

Цикл слайдов

Функция changeSlide будет отвечать за цикл слайдов. При каждом нажатии кнопки мы будем выполнять следующие действия:

Берем экземпляр текущего активного слайда.

Удаляем из активного слайда класс is-active.

Проверяем, какая кнопка нажата. Если это кнопка «следующий», мы добавляем класс is-active к слайду, который следует сразу за активным слайдом. Если такого слайда нет, этот класс получит первый слайд.

Если же нажата кнопка «предыдущий», мы добавим класс is-active к предыдущему слайду от активного слайда. Если такого слайда нет, этот класс получит последний слайд.

Вот эта функция:

Автопроигрывание

Функция autoplay будет отвечать за активацию режима автозапуска. По умолчанию мы должны вручную перемещаться по слайдам. Чтобы активировать автопроигрывание, мы добавим для слайд-шоу атрибут data-autoplay=»true».

Мы также можем настроить интервал между переключениями слайдов, определив data-autoplay-interval=»number» (по умолчанию 4000 мс) в качестве второго атрибута, например:

Вот эта функция:

Остановка автопроигрывания

Функция stopAutoplayOnHover будет отвечать за отключение режима автопроигрывания при наведении. Чтобы включить эту функцию, мы передадим атрибут data-stop-autoplay-on-hover=»true», например, так:

Вот эта функция:

Настройка стрелок

Функция customizeArrows будет отвечать за управление видимостью кнопок навигации и положения их спанов. Как мы уже говорили, кнопки навигации изначально будут скрыты.

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

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

Заключение

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

Автор: George Martsoukos

Источник: https://webdesign.tutsplus.com

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: