Краткое описание исходных кодов и принципа работы
HTML структура слайдера:
<div class="slider">
<div class="slider__wrapper">
<div class="slider__items">
<div class="slider__item">
...
</div>
<div class="slider__item">
...
</div>
<div class="slider__item">
...
</div>
<div class="slider__item">
...
</div>
</div>
</div>
<a class="slider__control slider__control_prev" href="#" role="button"></a>
<a class="slider__control slider__control_next" href="#" role="button"></a>
</div>
В разметке корневой элемент — это тег с классом .
Внутри него находятся:
- — wrapper (обёртка для слайдов);
- 2 элемента — ссылки, оформленные в виде кнопок для перехода соответственно к предыдущему и следующему слайду;
- точки или другими словами индикаторы — добавляются динамически посредством JavaScript кода;
Обертка содержит внутри , а он в свою уже очередь непосредственно сами item (слайды). Это элементы — .
Индикаторы () выполнены в виде нумерованного списка. Каждый элемент внутри него содержит атрибутом . В нём содержится индекс слайда. Он используется в JavaScript коде и определяет слайд на который нужно перейти в случае нажатия на него. Активный индикатор отмечается посредством класса .
Кнопки «назад» и «вперед» размечены с помощью элемента .
В определённый момент времени в слайдере отображается только один item, который не сдвинут относительно . Все другие слайды сдвинуты. Скрытие слайдов выходящих за пределы осуществляется с помощью свойства .
.slider__wrapper {
overflow: hidden;
}
Перемещение item выполняется с помощью CSS трансформации. Для этого к и в нужные моменты времени добавляется CSS-свойство с нужным значением.
Например, когда к добавляется со значением , то браузер осуществляет переход к следующему слайду, а если наоборот, — то к предыдущему.
Анимация переход осуществляется помощью CSS свойства transition:
.slider__items {
transition: transform 0.5s ease;
}
Скрипт слайдера написан на «чистом» JavaScript без использования jQuery и других каких-либо библиотек.
Он имеет следующую укрупнённую структуру:
Производительность и ленивая загрузкаСкопировать ссылку
Одно из самых неожиданных наблюдений, отмеченных на shouldiuseacarousel.com, состоит в том, что в каруселях со ссылками только «1% пользователей нажал на ссылку, из них 89% было на первом слайде». Исследования показывают, что даже для автоматически вращающихся каруселей количество кликов по слайдам, расположенных после первого, резко уменьшается.
Вполне вероятно, что первое изображение в нашем слайдере — единственное, которое увидит большинство скринридеров. Поэтому нужно рассматривать его как одно единственное и загружать последующие картинки только в случае, если пользователь решит на них посмотреть.
Мы можем использовать там, где он поддерживается, чтобы загрузить каждое изображение отдельно. Это связано с тем, что каждый слайд начинает прокручиваться, когда находится в области видимости.
Вот скрипт, примечания следуют:
- В определяем внешний элемент галереи как корневой. Мы можем совершить действие тогда, когда элементы становятся видимыми.
- Обнаруживаем функцию при помощи и просто загружаем изображения, если их нет. Извините, пользователи старых браузеров, но это лучшее, что мы можем предложить: по крайне мере вы получите контент.
- Для каждого слайда, который пересекается с другим, мы устанавливаем его через атрибут , как в случае с обычной ленивой загрузкой.
Позаботьтесь о том, чтобы пользователи не видели неработающие изображения при медленном соединении. Для этого случая добавим для них заглушку в качестве исходного значения . Получим крошечный SVG с data URI:
Без JavaScriptСкопировать ссылку
В данный момент пользователи с отключенным JavaScript работают без изображений, так как переключение на невозможно. Кажется, самое простое решение — добавить теги , в которых содержатся изображения с уже установленными значениями .
Теперь наш слайдер работает и без JavaScript. У нас неплохо выходит. Однако мы обрабатываем только случай «без JavaScript», который редко встречается. Это не печально распространённая ситуация со «сломанным JavaScript». Рик Шеннинк решил эту проблему, поместив в документа.
Мультимодальное взаимодействиеСкопировать ссылку
«Мультимодальность» означает «возможность взаимодействовать разными способами». Поддержка разных режимов взаимодействия звучит как что-то, что требует большого количества работы, но браузеры уже мультимодальны по умолчанию. Если вы не облажались, то всем интерактивным контентом можно управлять мышью, с клавиатуры и (где это поддерживается) тачем.
Придерживаясь стандартного поведения браузера, мы без особых усилий можем обеспечить мультимодальность в нашем слайдере.
Горизонтальная прокруткаСкопировать ссылку
Самый простой представимый слайдер — это область, которая содержит контент без переносов. Она расположена вдоль горизонтальной оси, и имеется возможность горизонтальной прокрутки. берёт тяжелую работу на себя.
Добавьте некоторые внешние отступы и границы, чтобы улучшить внешний вид слайдера. Это подходящий MVP (минимально жизнеспособный продукт — прим. переводчика) для пользователей мыши. Они могут прокручивать, потянув за видимую полосу прокрутки либо использовать жесты на трекпаде, если курсор находится поверх слайдера. В этом случае анимация будет плавной, потому что за неё отвечает браузер, а не JavaScript-функция, которая срабатывает каждые пять миллисекунд.
Когда скроллбара не видно, то возможные действия неочевидны. Не беспокойтесь: чуть позже я с этим разберусь.
Поддержка клавиатурыСкопировать ссылку
Для пользователей мыши на большинстве платформ достаточно навести курсор на слайдер, чтобы появилась возможность его прокручивать. Пользователи мобильных устройств могут совершить этот же трюк, если просто свайпнут влево или вправо. Это не требующая особых усилий мультимодальность, которая делает веб крутым.
Те, кто пользуется клавиатурой, могут взаимодействовать со слайдером только тогда, когда на нём сделан фокус.
При нормальных обстоятельствах большинство элементов по умолчанию не получают фокус. Его могут получить только определённые интерактивные элементы, например, ссылки и контролы с тегом . Пользователи не должны иметь возможности сделать фокус на неинтерактивных элементах. Если такое происходит, то это нарушение критерия WCAG 2.4.3. Порядок фокуса. Причина в том, что фокус должен предшествовать активации, и если активация невозможна, тогда зачем давать элемент в руки пользователям?
Чтобы дать пользователям возможность сделать фокус на слайдере, нам нужно добавить . Поскольку элемент (на котором сделан фокус) будет теперь объявлен скринридерами, мы должны присвоить ему роль и добавить подпись, которые его идентифицируют. В последующих демо мы будем использовать слайдер для показа произведений искусства, поэтому подпись «Галерея» кажется подходящей.
Роль достаточно общая, но подходит для больших областей контента. Она гарантирует, что атрибут сработает правильно и его содержимое будет объявлено. Вы не можете просто добавить для любого неинтерактивного или .
Теперь, когда есть фокус, стало доступным стандартное поведение для элемента: мы можем его прокручивать клавишами с левой и правой стрелками. Нам нужен только стиль фокуса, чтобы показать зрячим пользователям, что слайдер интерактивен:
Опции
Ниже приведены все опции доступные для настройки плагина jQuery Owl Carousel.
| Наименование | По умолчанию | Тип | Описание |
|---|---|---|---|
| 5 | int | Эта переменная позволяет установить максимальное количество видимых элементов (слайдов) в браузере с шириной более | |
| array | Позволяет установить число видимых слайдов в зависимости от ширины браузера. Формат , где = ширина браузера и = число видимых слайдов. Например, означает, что . Также можно использовать , чтобы отменить эти установки. | ||
| array | См. выше. | ||
| array | См. выше. | ||
| false | array | См. выше. По умолчанию отключено. | |
| array | См. выше. | ||
| false | array | Эта опция позволят установить собственные варианты в зависимости от ширины браузера. Если опция стоит, то , , , и др отключены. Например: . | |
| false | boolean | Отображает только один элемент. | |
| false | boolean | Опция запрещает растягивание, если количество элементов (слайдов) меньше, чем объявлено. Чтобы включить растягивание элементов установить . | |
| 200 | int | Скорость смены слайдов в мс. | |
| 800 | int | Скорость пагинации в мс. | |
| 1000 | int | Скорость перемотки в мс. | |
| Измените на любой числовое значение, например, и пойдет прокрутка каждые 5 секунд. Если вы поставите , по умолчанию скорость будет равна 5 секундам. | |||
| false | boolean | Остановить прокрутку при наведении мышки. | |
| false | boolean | Отображать кнопки “next” и “prev” | |
| array | Вы можете назначить свой собственный текст для навигации. Чтобы получить пустые кнопки используйте . Также можно использовать HTML. | ||
| true | true | Переход к первому слайду (при достижении последнего). Используйте , чтобы изменить скорость анимации. | |
| false | boolean | Вместо перехода по элементам срабатывает скролл. Оказывает влияние на кнопки и при клике/касании. | |
| true | boolean | Показываем пагинацию. | |
| false | boolean | Показываем цифры вместо кнопок пагинации. | |
| true | boolean | Вы можете использовать Owl Carousel лишь для десктопных сайтов. Чтобы отключить “отзывчивость” поставьте . | |
| 200 | int | Проверяет изменение ширины окна каждые 200мс для “отзывчивых” действий. | |
| window | селектор jQuery | OwlCarousel проверяет для отслеживания изменений ширины браузера. Вы можете проверять изменения ширины у любого другого элемента jQuery, например, у “. | |
| «owl-carousel» | string | Автоматически добавляет класс для базовых стилей плагина OwlCarousel. Лучше не изменять без крайней необходимости. | |
| «owl-theme» | string | Стили CSS плагина owl по умолчанию для кнопок и навигации. Изменить этот параметр, чтобы определить свою собственную тему. | |
| false | boolean | Задержка при загрузке изображений. Изображения за пределами области просмотра не будут загружены, пока пользователь не перейдет (проскроллит) непосредственно к самим изображениям. Замечательно подходит для мобильных устройств, увеличивая скорость загрузки страницы. IMG потребуется специальная разметка и . | |
| true | boolean | Когда используется пагинация пропускается загрузка изображений у страниц, которые были пропущены. Только загруженные изображения будут показаны в области просмотра. Если установлено в все изображения загрузятся, когда используется пагинация. Это надстройка к lazy load функции. | |
| «fade» | boolean / string | По умолчанию стоит с 400мс. Используйте , чтобы отменить этот эффект. | |
| false | boolean | Добавляет высоту к owl-wrapper-outer, таким образом вы можете использовать различную высоту у слайдов. Используйте опцию только в том случае, если на странице один слайд. | |
| false | string | Позволяет вам загрузить непосредственно из json-файла. Ваша json-структура должна соответствовать owl json-структуре. | |
| false | function | Это ф-я, вызываемая после ответа сервера для , построенная в плагине carousel. | |
| true | boolean | ||
| true | boolean | Переключить вкл/откл события мышки. | |
| true | boolean | Переключить вкл/откл события касания. | |
| false | boolean | Добавляем класс ‘’ видимым элементам. Работает с любым количеством элементов на экране. | |
| false | string | Добаляет CSS3 стили (перехода). Работаем только с одним элементом на экране. |
Slider Revolution
Slider Revolution — очень популярный плагин для слайдеров WordPress с почти полмиллионом продаж. Это многофункциональный плагин, который создает несколько исключительных слайдов, но требует от дизайна отличного чутья, чтобы извлечь из него максимум пользы.
Slider Revolution использует конструктор перетаскивания для создания слайдов. Эти слайды будут полностью адаптивными , работать с несколькими типами мультимедиа, включая видео. Вы можете использовать сообщения в блогах, пользовательские сообщения, социальные сети и все виды контента в слайдах, обеспечивая полный контроль над внешним видом вашего сайта.
Есть много всего, с чем нужно разобраться, и дизайн не такой плавный, как некоторые. Однако, если вы знакомы с продуктами Adobe, интерфейс и элементы управления должны быть вам сразу же знакомы.
Особенности Slider Revolution:
- Более 200 готовых шаблонов, которые вы можете использовать
- Переработанный интерфейс легче освоить
- Дополнительные дополнения для еще большего расширения слайдов
- Тысячи элементов на выбор
- Множество доступных анимаций и эффектов
Плюсы Slider Revolution:
- Очень хорошо продуманный визуальный редактор
- Более 200 шаблонов и более 2000 элементов на выбор
- Работает с несколькими типами мультимедиа, включая видео и сообщения в блогах
- Буквально сотни вариантов сделать слайды уникальными
Минусы Slider Revolution:
- Нет бесплатной версии
- Этот визуальный редактор не самый удобный
Возможность действияСкопировать ссылку
Уже есть пара вещей, которые сообщают пользователю, что это область слайдера: стиль фокуса и тот факт, что обычно крайнее правое изображение обрезается. Предполагается, что можно увидеть больше.
Вы можете решить, что этого достаточно, в зависимости от того, насколько критично для пользователей видеть скрытый контент. Так же в этом случае сохраняется лаконичность кода. Тем не менее, мы могли бы сделать всё более очевидным. Мантра инклюзивного дизайна: если есть сомнения, объясните это более подробно.
Мы можем сделать это с помощью элемента с «инструкцией» после слайдера. Сообщение будет появляться в зависимости от его состояния. Например, мы могли бы показать при помощи сообщение «Прокрутите, чтобы увидеть больше». Смежный селектор + добавит стиль к элементу .
Сообщение в состоянии может быть реализовано примерно таким же образом. Однако для пользователей скринридеров нам нужно ещё связать это сообщение с областью слайдера. Не имеет значения представляет эта область интерес для каждого из них или нет. Это даёт больше контекста о том, почему область может быть им интересна. Также пользователи лучше понимают, чего они избегают, когда им не нужен этот элемент.
Для этого можем использовать атрибут . Мы указываем его для сообщения с фокусом, используя значение в качестве содержимого для ARIA-атрибута:
Теперь, когда фокус устанавливается на галерее слайдера, скринридеры объявят что-то вроде этого: «Галерея изображений, область, используйте клавиши со стрелками для того, чтобы увидеть больше». Как дальше описано в примечании про мультимодальность, убедитесь, что пользователям скринридеров будет просто войти в эту область и пройти через каждое изображение в определённом порядке в «режиме просмотра» (в нём они проходят через каждый элемент). Другими словами, слайдер мультимодален даже для этой группы пользователей.
Путь пользователя скринридера в режиме просмотра во многом похож на путь пользователя клавиатуры при наличии связанных/интерактивных слайдов. В любом случае, браузер или скринридер сдвинет контейнер, чтобы показать элементы, на которые сделан фокус.
Hover и focus?Скопировать ссылку
Иногда интересно то, что обнаруживаешь при тестировании. В моём случае я заметил, что, когда одновременно и фокусировался, и наводился на слайдер, появлялись оба сообщения. Конечно же.
Я обнаружил, что в качестве улучшения могу объединить состояния () и показать сообщение, в котором описаны обе ситуации.
Используя селектор следующего элемента , я могу добиться того, что два других сообщения скрыты, в противном случае увидел бы сразу три!
Попробуйте навестись на слайдер в демо, а затем кликнуть по нему:
Вместо заключения
Итак, первое, что вам нужно сделать — это немедленно удалить все слайдеры. Нет, постойте — лучше протестировать! Замерьте CTR и узнайте, интересна ли вашим пользователям такая «крутилка».
Но, пожалуйста, не ошибитесь, т. к. материал в этом посте относится ТОЛЬКО к верхней части страницы или хедеру. Если речь идет о слайдере, например, отзывов ваших клиентов в нижней части целевой страницы, то данные рекомендации неактуальны.
Используйте убедительную графику в союзе с качественным контентом, чтобы донести информацию до целевой аудитории и эффективно ее конвертировать.
Высоких вам конверсий!
От редакции
Итак, как мы выяснили на примере слайдера, не всегда эффектный элемент является эффективным.
Какие элементы, функции и инструменты использовать, а самое главное – как именно, знают участники рейтинга креативности веб-студий.
В этом рейтинге мы собрали 100 самых креативных веб-студий России, Украины и Беларуси. Для этого мы суммировали их победы в самых престижных конкурсах сайтов. Это значит, что высокий уровень профессионализма этих веб-студий признан ведущими экспертами в области дизайна.
По материалам searchengineland.com
Оригинал: http://searchengineland.com/homepage-sliders-are-bad-for-seo-usability-163496
RoyalSlider – Touch-Enabled jQuery Image Gallery
Наличие на сайте удобного и отзывчивого слайдера сегодня важнее, чем когда-либо и RoyalSlider — Touch-Enabled jQuery Image Gallery обладает обоими качествами.
Разработанный в новейших HTML5 и CSS3, это отличный выбор.
Вот некоторые из его королевских опций:
- SEO оптимизация
- выбор конфигураций
- более 10 стартовых шаблонов
- включает fallbacks для переходов CSS3
- и более
Лучшей функцией считаю «модульную архитектуру сценария», которая дает разработчикам возможность исключить лишнее из основного файла JS, облегчая его.
The RoyalSlider – Touch-Enabled jQuery Image Gallery это JavaScript слайдер, отличное дополнение к набору инструментов веб-разработчика.
mightySlider — Responsive Multipurpose Slider
Он действительно мощный, этот mightySlider — Responsive Multipurpose Slider.
Пригоден не только для показа одного кадра, но как протяжённый слайдер с навигацией для приятного дизайна одностраничного веб-сайта.
Вы найдёте здесь множество вариантов опций:
- поддержка клавиатуры, мыши и сенсорная
- ускорение переходов CSS3
- чистая разметка и оптимизация SEO
- неограниченные слайды, надписи и эффекты титров
- и многое другое
Мощное API удобно для разработчиков и предполагает разные способы его использования.
Чистый код с хорошими комментариями выводит mightySlider — Responsive Multipurpose Slider в число лидеров среди jQuery слайдеров.
Установка Owl Carousel 2
Собсно для начала нам нужно его скачать. Пакет доступен из npm и bower:
npm
bower
Если вы не хипстер используете пакетные менеджеры, то можно скачать с гитхаба в разделе релизов: Скачать Owl Carousel 2
Само собой нам так же понадобиться jQuery.
Подключаем
Скачав и распаковав Owl Carousel 2 нам нужно его подключить. Для этого в <head> добавляем стили:
Если вам лень писать свои стили для внешнего вида слайдера, то можете подключить CSS файл со стандартной темой от разработчиков.
И внизу страницы подключаем непосредственно саму js’ку. АЛЯРМА! Owl Carousel должен подключаться после jQuery!
Используем
Добавляем в нужное вам место на странице блок со слайдером
Содержимым слайдера может выступать что угодно. Картинки, текст, списки, видео, все на что хватит вашей фантазии, но оно обязательно должно быть обернуто в контейнер (Например <div> или <ul>)
Если вы не используете стандартную тему (owl.theme.default.css) то класс owl-theme добавлять не нужно.
Теперь просто вызываем функцию плагина (добавляем следующий код в конце странице, после подключения owl.carousel.min.js)
Все! Карусель установлена и функционирует. Вы молодец!
ЗаключениеСкопировать ссылку
Инклюзивный дизайн не только про то, как сделать интерфейс одинаковым для всех. Он также о том, как предоставить как сделать интерфейс удобным как можно большему числу людей. У нашего слайдера не самая модная реализация, но он всё ещё достаточно хорош. Это контент должен поражать людей, а не сам интерфейс: эпохальные дадаистские фотомонтажи Ханны Хёх не должны задвигаться на второй план. Убедитесь, что слайдер адаптивный, мало весит, надёжный и совместимый. Тогда у художницы будет большая аудитория, которую она заслуживает.
Я предложил в своём докладе «Пишите меньше чёртового кода» концепцию непрогрессивного неулучшения (unprogressive non-enhancement). Идея заключается в том, что поток контента, на основе которого мы строим вкладки, карусели и тому подобное, часто не следует перестраивать. Отсутствие улучшения может быть лучше «улучшения». Однако при разумном и бережном расширении представления контента, как, например, в слайдерах, это может быть довольно привлекательным способом получения информации. Лучше всего найти хорошую и исследованную причину для такого исключения.
