Вертикальный слайдер для сайта на jQuery | RUDEBOXСоздавая сайт с материалом, а именно с фото или видео, вам необходимо правильно его организовать. Правильная организация контента на сайте позволит увеличит читаемость сайта, и визуально разгрузить сайт. Зачастую медиа-материалы организовывают в слайдер, который по умолчанию скрывает часть не нужной информации. Данные слайдеры бывают различных размеров, эффектов прокрутки и направления вращения материалов. В сегодняшнем уроке мы рассмотрим, как создать замечательный, вертикальный слайдер для сайта.

 

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

Шаг 1. HTML

Для разметки нам необходимо создать небольшой контейнер, со следующими элементами: заголовок, оболочка для контента или описания и оболочка для слайдов:

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

Вертикальный слайдер для сайта на jQuery | RUDEBOX

Шаг 2. CSS

Мы устанавливаем шрифт с ресурса fontello. У этого шрифта будет только один символ и это — небольшая магазинная тележка для ссылки «Купить этот товар»:

Нам необходимо создать разметку, которая будет 100% шириной и высотой экрана, таким образом, зададим абсолютную позицию нашему контейнеру и мы установим overflow: hidden.

У всех вторичных элементов нашего основного контейнера будет ширина 50%, а также абсолютное позиционирование:

Заголовку зададим высоту в 150px, и поместим его в верхний левый угол:

Вывеску с ценой установим в левой стороне:

Нам необходимо добавить значок магазинной тележки при помощи псевдо-класса :after:

Контейнер для слайдов и навигации будет помещен в правую сторону и у него будет 100% высоты:

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

У навигации будет псевдо-элемент, который будет иметь вид стрелки.

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

Необходимо изменять размеры текстовых элементов:

Кроме этого нет свободного пространства, устанавливаем фиксированную высоту для текста и сделаем его с возможностью прокрутки:

Шаг 3. JavaScript

Для начала нам необходимо начать с кэширования элементов и определить некоторые переменные:

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

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

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