%d1%81%d1%82%d0%b8%d0%bb%d1%8c%d0%bd%d1%8b%d0%b9-%d1%81%d0%bb%d0%b0%d0%b9%d0%b4%d0%b5%d1%80-%d0%b4%d0%bb%d1%8f-%d1%81%d0%b0%d0%b9%d1%82%d0%b0-%d0%bf%d1%80%d0%b8-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d0%b8-svВ данном уроке мы бы хотели вам рассказать о возможности реализации достаточно легкого слайдера, который отлично впишется в любой дизайн сайта, кроме этого мы будем использовать SVG, что позитивно скажется в скорости загрузки сайта и поисковой оптимизации. Идея состоит в следующем, у нас будет две стрелки стилизованы с предварительным просмотром в виде ромба, по центру находиться квадрат с изображением, слайды будут изменяться при нажатии на стрелки навигации при помощи красивой анимации.

 

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

Шаг 1. HTML

Наша HTML структура будет состоять из трёх ненумерованных списков, что достаточно удобно,- ul.gallery и ul.navigation для слайдера и элементов навигации, ul.caption для описания.

Элемент из списка ul.gallery будет представлять собой элемент .svg-wrapper внутри которого будет <svg>, включающий <clipPath> элемент <image>, элемент <use>.

%d1%81%d1%82%d0%b8%d0%bb%d1%8c%d0%bd%d1%8b%d0%b9-%d1%81%d0%bb%d0%b0%d0%b9%d0%b4%d0%b5%d1%80-%d0%b4%d0%bb%d1%8f-%d1%81%d0%b0%d0%b9%d1%82%d0%b0-%d0%bf%d1%80%d0%b8-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d0%b8-sv

Шаг 2. CSS

Стили будут достаточно просты, по умолчанию позиция всех элементов в ul.gallery будет абсолютной, а сами элементы невидимы, смещены и уменьшены в размерах.

Также мы добавили Класс .selected предназначен для отображения активного изображения.

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

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

Схожие классы будут задействованы для отображения подписей к изображениям. По умолчанию все тексты скрыты и смещены вправо; класс .selected используется для отображения активной подписи.

Шаг 3. jQuery

Для полноценной работы слайдер мы добавили объект svgClippedSlider, где применили метод bindEvents для обработки нажатий по элементам слайдера.

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

Вот и все. Готово!

Читайте также: