В продолжение предыдущей статьи мы рассмотрим весьма интересный слайдер flipbook для сайта. Ключевая особенность данного ротатора состоит в том, что слайды меняются в виде перелистывания страниц, что создает иллюзию объемности. Кроме этого для слайда допускается два вида навигации. Первая навигация реализована в виде боковых стрелок, а вторая при помощи круговых точек в низу слайда, при помощи которых можно с легкостью перейти к необходимому материалу. Такой слайдер станет отличным дополнением для вашего сайта.

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

Шаг 1. HTML

Для начала мы начнем с разметки, так как мы будем использовать jQuery плагин, то для начала нам необходимо их подключить к странице. Также нам необходим скрипт Modernizr, который служит для правильной работы и отображения слайдера, и последним будет pictureflip- этот плагин будет содержать код ротатора.

После того как подключили скрипты мы переходим к разметке. Для удобности мы будем использовать простой контейнер, при этом поместить каждое изображение в отдельный блок и задать уникальный ID.

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

Шаг 2. CSS

Со стилями все интереснее, мы будем использовать 3D transforms, чтобы у нас получился эффект зеркального отражения, для начала определим общие параметры.

Теперь нам необходимо расположить правильно блоки, и повернуть их, чтобы у нас получился эффект вращения, при этом  поместив их обратно в контейнер с картинками. Для правильной работы, мы должны сохранить 3D эффект в CSS.

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

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

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

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

Со стилями мы закончили.

Шаг 3. jQuery

Для начала мы рассмотрим основную структуру плагина pictureflip.

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

Следующий шаг будет добавление UI.

Затем мы должны определить несколько простых функций. Эти функции касаются анимаций, z-index и перезапуска слайдов.

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

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

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

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

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