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

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

Такой вариант слайдера отлично впишется в дизайн любого сайта, кроме этого его легко редактировать. Мы  будем использовать изображения от Isaac Montemayor. Вы можете посмотреть его работы в Dribbble. И так, давайте приступим.

Шаг 1. HTML

Для начала нам необходимо создать достаточно простую html разметку:

Так как мы используем плагин jQuery он преобразует разметку приведенную выше в следующую:

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

Создаем круговой слайдер для сайта на jQuery RUDEBOX

Далее нам необходимо вызвать сам плагин:

Данный плагин имеет несколько опций, вот основные из них:

Следует обратить внимание, что анимация будет работать только в браузерах поддерживающие трансформации СSS3.

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

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