3D карусель Cloud 9 Carousel

Ранее уже была заметка 3D карусель изображений про похожий слайдер, но Cloud 9 Carousel имеет гораздо больше настроек и возможностей.

Установка:

  • Подключаем jQuery 1.3.0 (или выше) или Zepto 1.1.1 (или выше)
  • Подключаем jquery.cloud9carousel.js или jquery.cloud9carousel.min.js
  • Инициализируем $(element).Cloud9Carousel(option). Подробнее см. примеры и настройки.

Пример 1:

Пример с минимальными кодами и настройками

Пример 2:

Модальные окна в этот скрипт не входят (они от сайта). Я их добавил, чтобы было понятнее как работают ссылки на элементах карусели. А именно: клик по элементу перемещает карусель на него, а клик по ссылке элемента перемещает карусель и открывает ее.

Заголовок

Описание блока

Заголовок

Описание блока

Заголовок

Описание блока

Заголовок

Описание блока

Заголовок

Описание блока

Заголовок

Описание блока

Настройки:

Настройка Описание По умолчанию
xOrigin Центр карусели (координата X) (ширина контейнера / 2)
yOrigin Центр карусели (координата Y) (высота контейнера / 2)
xRadius Половина ширины карусели (ширина контейнера / 2.3)
yRadius Половина высоты карусели (высота контейнера / 6)
farScale Масштаб элемента в его самой дальней точке (диапазон: от 0 до 1) 0.5
mirror См. настройки отражения none
transforms Использование CSS трансформаций true
smooth Использование максимально эффективной частоты кадров через API requestAnimationFrame true
fps Кадры в секунду (если smooth выключен) 30
speed Относительный коэффициент скорости карусели. Любое положительное число: 1-медленное, 4-среднее, 10-быстрое. 4
autoPlay Автоматический поворот карусели (положительное число по часовой стрелке). Автоматическое воспроизведение не выполняется при наведении мыши на контейнер. Значение 0 означает, что автоматическое воспроизведение отключено. 0
autoPlayDelay Задержка, в миллисекундах, между автоматическим вращением 4000
mouseWheel Вращение карусели с помощью колесика мыши. Требуется "mousewheel" событие, предусмотренное плагином jQuery Mousewheel. false
bringToFront Поворот карусели к элементу на котором был произведен клик false
buttonLeft Элемент, который будет вращать карусель влево, например: $("#button-left") none
buttonRight Элемент, который будет вращать карусель вправо, например: $("#button-right") none
itemClass Атрибут класса элементов внутри контейнера карусели "cloud9-item"
frontItemClass Атрибут класса элемента, который ставится первым none
handle Строка для взаимодействия с каруселью, например: $("#carousel").data("carousel").go(1) "carousel"
Настройки отражения:

Обратите внимание: reflection.js не работает на Zepto

После подключения на страницу reflection.js позволяет создавать зеркальные отражения, например:

Методы:

После инициализации карусели можно вызвать следующие методы. Например:

// Повернуть три элемента по часовой стрелке
$("#carousel").data("carousel").go( 3 );
Метод Описание
go( count ) Поворот карусели на кол-во элементов (+ по часовой стрелки, - против
goTo( index ) Поворот карусели на индекс элемента
nearestIndex() Возвращает индекс на основе 0 элемента, ближайшего к фронтальному (целое число)
nearestItem() Возвращает ссылку на элемент, который находится ближе всего к фронту (Item)
deactivate() Отключает карусель (необратимо). Используется для того, чтобы остановить механизм карусели и освободить ее элементы.
itemsRotated() Возвращает число элементов, повернутых из начальной нулевой позиции. Например, в карусели с 5 элементами, которые сделали три оборота по часовой стрелке, значение будет -15.
floatIndex() Возвращает значение элемента в передней части карусели. Например, если нкарусель прошла на 20% мимо элемента 2 к следующему, то floatIndex() вернет 2.2

Колбеки:

Функции обратного вызова передаются конструктору карусели вместе с настройками. Например:

Колбек Описание
onLoaded Срабатывает один раз, когда карусель полностью инициализирована
onRendered Срабатывает каждый раз при перемещении карусели
onAnimationFinished Срабатывает, когда карусель закончила вращаться

Плагин Cloud 9 Carousel на github
Фотографии kellepics
Иконки GraphicLoads

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!