Сделайте простое слайдшоу JavaScript без jQuery

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

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

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

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

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

Пользователь может запутаться в основной цели сайта

Это особенно проблема с большими слайд-шоу домашней страницы. Если вы не можете решить, что показать пользователю, как вы можете ожидать, что пользователь сам решит, что ему делать? ( Чирикать это )

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

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

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

Стоит прочитать подробное описание их результатов, если у вас есть шанс.

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

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

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

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

Давать общее впечатление

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

Когда контент легко доступен за пределами слайд-шоу

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

В ситуации прогрессивного улучшения

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

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

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

Если вы (или ваши клиенты!) Настаиваете на использовании слайд-шоу, вот отличная статья о том, как сделать его доступным .

Согласно этой статье:

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

1. Разрешить пользователю остановить все движение
2. Обеспечить видимые элементы управления, доступные для клавиатуры, мыши и сенсорного
3. Обеспечьте действительный и понятный порядок фокусировки через слайд-шоу
4. Действительное кодирование и таблицы стилей
5. Обеспечить значимую альтернативу слайд-шоу

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

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

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

Пришло время добавить кнопку «Пауза / Воспроизведение», кнопку «Далее» и кнопку «Назад».

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

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

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

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

 var next = document.getElementById('next'); var previous = document.getElementById('previous'); next.onclick = function() { pauseSlideshow(); nextSlide(); }; previous.onclick = function() { pauseSlideshow(); previousSlide(); }; 

 .controls { display: none; } 

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

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