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

 

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

Шаг 1. HTML

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

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

Вертикальный анимированный слайдер для сайта на JS

Шаг 2. CSS

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

Шаг 3. JS

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

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

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