Как сделать простой слайдер на JavaScript без JQuery

Дата публикации: 2016-06-15

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

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

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

Создаем простое слайд шоу

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

<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>

<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:

/*	
Первичные стили:
С ними работает слайд шоу
*/

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

Первичные стили:

С ними работает слайд шоу

#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;

}

Теперь можно добавить стили внешнего вида слайд шоу. Для нашего демо я использовал следующие стили:

/*
Второстепенные стили:
Внешний вид; можете изменять
*/

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

Второстепенные стили:

Внешний вид; можете изменять

.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

JS выполняет одну задачу: прячет текущий слайд и показывает следующий. Для этого нам потребуется сменить названия классов слайдов. Вот наш код JS:

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

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

}

Разберемся, что здесь происходит:

Первое, мы с помощью querySelectorAll получаем все слайды из контейнера.

Затем мы создаем переменную для получения текущего слайда.

В конце мы задаем интервал в две секунды для следующего слайда (2000ms).

Подробнее разберем функцию nextSlide:

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

Потом добавляем класс к текущему слайду. Мы используем оператор % на случай, если это был последний слайд, чтобы вернуться к первому. Данный оператор отлично подходит в случаях, когда необходимо выполнять математические операции с циклами типа часов или календаря. В нашем случае 5 слайдов. Посчитаем все числа: 1%5=1, 2%5=2, 3%5=3, 4%5=4, and 5%5=0.

После получения индекса слайда мы меняем класс и показываем новый. И опять прозрачность обрабатывается свойством transition.

Вот и все, мы создали самое простое слайд шоу. По поводу совместимости: Свойство transition не поддерживается в IE9 и ниже, в таком случае эффект затухания сменится на обычный резкий переход к следующему слайду. Базовое слайд шоу:

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

Прежде чем использовать слайд шоу определитесь с его ролью на странице. Давайте разберем, как слайд шоу может убить весь пользовательский опыт и доступность на сайте, если неправильно его использовать.

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

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

По исследованию Университета Нотр-Дам только 1.07% людей кликают на контент в слайд шоу, а из этой маленькой доли людей только 3% кликают на другие слайды помимо первого. Данный пример показывает опасность при расположении критического контента в слайд шоу.

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

Эта проблема особо остро стоит на сайтах с большими слайд шоу на домашних страницах. Если вы не можете точно определиться, что показывать пользователям, как они поймут, что нужно делать на вашем сайте?

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

Фирма по оптимизации конверсии WiderFunnel провела исследования эффективности слайд шоу и пришла к следующему выводу: «Мы протестировали ротаторы специальных предложений и выяснили, что они плохо представляют контент на домашней странице.»

Слайд шоу может разозлить мобильных пользователей

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

Когда применять слайд шоу

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

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

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

Когда к контенту легко получить доступ из другого места

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

При использовании техники прогрессивного улучшения

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

Советы по доступности

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

Из статьи: «Для создания доступного слайдера необходимо соблюсти 5 условий:

Пользователь должен быть способен остановить любое движение

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

Обеспечить правильный порядок фокусировки в слайдере

Валидный код и стили

Предоставить понятную альтернативу слайдеру»

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

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

Пора добавить кнопку паузы, следующий слайд и предыдущий слайд. Кнопка паузы. Сперва, добавьте кнопку в HTML:

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

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

Потом добавьте этот код JS:

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

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

}

};

Что происходит в скрипте:

Переменная playing хранится в моменты, когда слайдер активен.

Кнопку паузы мы занесли в переменную pauseButton, чтобы потом не искать ее по документу.

Функция pauseSlideshow останавливает слайдер, а в кнопку паузы записывает «Play».

Функция playSlideshow запускает слайдер, а в кнопку Play записывает Pause.

В конце мы вешаем обработчик клика, чтобы кнопка play/pause могла ставить слайдер на паузу и запускать его.

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

Кнопки следующий и предыдущий

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

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

1 2	<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() {

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

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. Добавьте код ниже в скрипт, чтобы кнопки начали работать:

var next = document.getElementById('next');
var previous = document.getElementById('previous');

next.onclick = function() {
    pauseSlideshow();
    nextSlide();
};
previous.onclick = function() {
    pauseSlideshow();
    previousSlide();
};

var next = document.getElementById('next');

var previous = document.getElementById('previous');

next.onclick = function() {

pauseSlideshow();

nextSlide();

};

previous.onclick = function() {

pauseSlideshow();

previousSlide();

};

Теперь у нас есть работающие кнопки управления слайдером! Вот так может выглядеть слайдер с кнопками управления и парочкой стилей:

Обратите внимание, чтобы автопроигрывание не помешало переключению между слайдами, мы ставим его на паузу, когда пользователь кликает на кнопки Next и Previous. Кнопки управления доступны на клавиатуре автоматически, так как это обычные HTML теги.

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

Фолбэк на случай если JavaScript недоступен

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

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

Прячем кнопки если JavaScript недоступен

Прячьте кнопки с помощью CSS по умолчанию.

.controls {
    display: none;
}

.controls {

display: none;

}

Затем показывайте их с помощью JS. Так пользователь увидит кнопки только, если JS активен.

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

var controls = document.querySelectorAll('.controls');

for(var i=0; i<controls.length; i++){

controls[i].style.display = 'inline-block';

}

Код выше пробегается в цикле по кнопкам и показывает их.

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

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

Затем добавьте JS код и пробегайтесь в цикле по слайдам и меняйте их позиционирование на абсолютное (этот код обязательно должен быть после определения переменной slides):

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

for(var i=0; i<slides.length; i++) {

slides[i].style.position = 'absolute';

}

В таком случае слайды не будут отображаться списком, если доступен JS.

Заключение

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

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

А вы что думаете? Есть у вас какие-нибудь хорошие истории о слайдерах? Или плохие? Забавные? Пишите об этом в комментариях.

Автор: Gabrielle Gosha

Источник: //www.sitepoint.com/

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

Метки: слайдер

Как сделать простой слайдер на JavaScript без JQuery

Создаем простое слайд шоу

JavaScript

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

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

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

Слайд шоу может разозлить мобильных пользователей

Когда применять слайд шоу

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

Когда к контенту легко получить доступ из другого места

При использовании техники прогрессивного улучшения

Советы по доступности

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

Кнопки следующий и предыдущий

Фолбэк на случай если JavaScript недоступен

Прячем кнопки если JavaScript недоступен

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

Заключение

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

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

Комментарии (13)

Материалы

Мы в соц. сетях

Связь

Информация