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

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

  • создание галереи 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 доступен, слайды не будут отображаться в виде списка.

Заключение

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *