Доступный слайдер 1/2

Доступный слайдер - 1/2

22.01.2019

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

  1. функциональность даже без включенного JavaScript
  2. tabindex и фокус элементов DOM
  3. дополнительные стили классов при наличии JS

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

Когда я начал работать и просто писал JavaScript, мой босс сказал мне кое-что важное, о чем я всегда помню, когда делаю веб-сайты:

Сайт всегда должен работать, даже если у вас нет JavaScript.

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

Но не только это необходимо, когда речь идет о доступности..

Для обеспечения доступности требуется не только возможность доступа к контенту при отсутствии JavaScript, но и возможность легкого доступа к нему, когда есть JavaScript, но есть и другие препятствия..

Здесь мы рассмотрим пример, который покажет нам, как с немногим более 100 строк кода мы можем сделать полностью доступный слайдер..

Состав

Начнем с пустой страницы HTML5.

!DOCTYPE html>
html>
голова>
мета-кодировка = "utf-8" />
заголовок> Слайдер / заголовок>
/ голова>
тело>
/ body>
/ html>

Напомним, что объявление DOCTYPE в HTML5 максимально упрощено, оставляя браузерам возможность определять лучший способ представления контента..

Также помните, что сложный метатег кодирования HTML4 также упрощен до meta charset = "utf-8" /.

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

!DOCTYPE html>
html>
голова>
мета-кодировка = "utf-8" />
заголовок> Слайдер / заголовок>
/ голова>
тело>
div id = "слайдер" tabindex = "0">
ul>
li> img src = "images / slide-1.jpg" alt = "" /> / li>
li> img src = "images / slide-2.jpg" alt = "" /> / li>
li> img src = "images / slide-3.jpg" alt = "" /> / li>
li> img src = "images / slide-4.jpg" alt = "" /> / li>
li> img src = "images / slide-5.jpg" alt = "" /> / li>
/ ul>
/ div>
/ body>
/ html>

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

Стили

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

!DOCTYPE html>
html>
голова>
мета-кодировка = "utf-8" />
заголовок> Слайдер / заголовок>
ссылка rel = "stylesheet" href = "style.css" media = "all" />
тип скрипта = "text / javascript" charset = "utf-8" src = "http://code.jquery.com/jquery-1.6.min.js"> / script>
тип скрипта = "text / javascript" charset = "utf-8" src = "func.js" defer = "defer"> / script>
/ голова>
тело>
div id = "слайдер" tabindex = "0">
ul>
li> img src = "images / slide-1.jpg" alt = "" /> / li>
li> img src = "images / slide-2.jpg" alt = "" /> / li>
li> img src = "images / slide-3.jpg" alt = "" /> / li>
li> img src = "images / slide-4.jpg" alt = "" /> / li>
li> img src = "images / slide-5.jpg" alt = "" /> / li>
/ ul>
/ div>
/ body>
/ html>

Читать также:  Хук GIT postmerge для объединения и минимизации JavaScript

Вы можете заметить атрибут tabindex в div id = "slider". Это сделано для повышения доступности, что мы укажем, когда перейдем к части JavaScript..

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

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

Мы начинаем наш стиль с двух строк, чтобы очистить основные стили и дать базовый вид нашему сайту:

* {маржа: 0; отступ: 0; } body {padding: 20px 0; фон: # 333; цвет: #FFF; шрифт: обычный 12px Arial, Helvetica, без засечек; }

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

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

#slider {позиция: относительная; ширина: 960 пикселей; маржа: 0 авто; граница: 2px solid # 000; } #slider: focus {контур: нет; } #slider ul {ширина: 100%; тип-стиль-список: нет; переполнение: скрыто; } #slider ul li {display: inline; плыть налево; } #slider li img {float: left; }

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

На #slider я установил position: relative; потому что внутри у меня есть список, ширина которого, как я знаю, я установлю на 100% и ожидаю, что он будет таким же большим, как контейнер #slider.

Читать также:  JavaScript и работа с DOM

На самом #slider я установил ширину и расстояние: 0 auto; так, чтобы он был по центру страницы. Я установил черную рамку толщиной 2 пикселя..

Поскольку мы установили tabindex для div id = "slider" в HTML, нам нужно позаботиться о стиле вложения браузера по умолчанию. Мы удаляем его, устанавливая контур: none на #slider: focus;.

В самом списке мы устанавливаем 100% ширину (помните, что это ширина ближайшего относительного родительского элемента — в нашем случае это #slider, потому что именно в нем мы устанавливаем position: relative;).

В элементах li мы устанавливаем display: inline; а также float: left, потому что в противном случае, когда мы загружаем страницу между картинками, мы получаем несколько пустых пикселей. Когда мы устанавливаем float самих элементов img, он исчезает, но для того, чтобы элементы были такими же высокими, как изображения, нам также необходимо установить для них стиль float..

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

Необъяснимо и точно неизвестно, почему этот стиль почти всегда выполняет ту работу, которую мы хотим, и элемент получает правильную высоту (включая все его дочерние элементы)..

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

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

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

С JavaScript или без него?

Теперь нам нужно поработать со стилями, если у нас есть JavaScript..

Проще всего просто добавить еще один класс к нашему слайдеру через JS и использовать этот класс для применения новых стилей. Чтобы облегчить мою разработку, я сначала вручную добавлю этот новый класс в HTML, представлю новые стили, а когда все будет готово и протестировано, я добавлю сам JavaScript..

Читать также:  Установите Apache 2 4 в Windows

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

# slider.js {height: 540px; переполнение: скрыто; } # slider.js: focus {цвет границы: # 666; } # slider.js ul {позиция: абсолютная; ширина: 50000эм; высота: 100%; } # slider.js ul li {width: 960px; высота: 100%; } # slider.js a {position: absolute; верх: 250 пикселей; z-индекс: 10; ширина: 20 пикселей; высота: 40 пикселей; фон: rgba (255, 255, 255, 0.2); } # slider.js .next {right: 10px; } # slider.js .prev {left: 10px; }

В # slider.js я устанавливаю фиксированную высоту, как и высоту элемента, и устанавливаю overflow: hidden, потому что этот контейнер будет играть роль окна, через которое вы будете видеть часть большой полосы элементов, которая время от времени будет заменена анимация.

Сосредоточившись на #slider, я теперь изменяю цвет рамки, чтобы посетители сайта имели некоторое указание на то, что элемент находится в фокусе, и у них была возможность для особого взаимодействия (дополнительная информация — когда мы перейдем к JS) . Я установил абсолютное позиционирование в списке, чтобы затем переместить его, большая ширина, которая, я уверен, подойдет для всех элементов, которые будут в нем присутствовать, потому что для горизонтального слайдера, как и я, мне нужна дочерняя элементы располагаются горизонтально рядом друг с другом.

Я также установил высоту на 100%, чтобы убедиться, что она будет точно соответствовать размеру окна..

Мы устанавливаем элементы li в списке такой же ширины, как окно, чтобы заполнить его полностью, а также высоту 100%. Ширина 100% здесь не будет работать, поскольку она применяется не только к относительным позиционированным родительским элементам, но также и к абсолютно позиционированным, поэтому в этом случае 100% ширина приведет к 50000em..

В дополнение к этим элементам мы устанавливаем стили для некоторых ссылок, которых нет в HTML, но мы будем добавлять их динамически с помощью JS. Мы можем легко вводить их стили и без класса .js, потому что, если нет JS, эти элементы даже не будут существовать, но для согласованности я оставлю его, чтобы следовать этому соглашению об именах.

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

Настоящая часть слайдера — его JS-код — скоро ожидается в новом посте (вторая часть урока)..

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