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

 

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

Шаг 1. HTML

HTML структура состоит из неупорядоченного списка (ul.cd слайдера), содержащий слайды, и два дополнительных элемента списка ( ul.cd-slider-navigation и ol.cd-slider-controls) для навигации слайдера.

Каждый элемент списка внутри ul.cd-slider состоит с SVG, содержащего элемент <clipPath> (используется для изменения области отсечения слайда изображения).

Создаем адаптивный слайдер с помощью SVG

Шаг 2. CSS

Структура слайдера довольно простая: все слайды должны иметь непрозрачность: 0, в абсолютной позиции и размещаются один за одним (top: 0 и left:0). .Visible-класс добавляется для выбранного слайда (в конце отсечения анимации), чтобы сделать его видимым.

Примечание: мы должны были использовать отступы Hack, чтобы сделать SVG более отзывчивым (IE плохо работает с SVG, по этому нам пришлось учесть некоторые варианты).

Шаг 3. JS

Чтобы анимировать область отсечения слайда изображения, мы оживили ‘D’ атрибут <path> элемент внутри <clipPath>.

После того, как определены пути, мы добавили в .cd-slider и data-stepn атрибут (по одному для каждого слайда), равный ‘D’  атрибуту для определенного пути (легко восстановить его с помощью JavaScript). Затем мы использовали animate() метод, чтобы анимировать snap.svg.

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

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

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