Главная » Программирование » JavaScript: 3D карусель — плагин Cloud 9 Carousel

JavaScript: 3D карусель — плагин Cloud 9 Carousel

Задача. Необходимо сделать 3D-карусель изображений с помощью JavaScript плагина «Cloud 9 Сarousel».

Аватар HTML PHP Wordpress CSS JavaScript
Пример 3D-карусели c плагином Cloud 9 Carousel

Решение. Плагин «Cloud 9 Сarousel» работает с библиотеками jQuery и Zepto, поддерживает прокрутку колесом мыши (нужно установить плагин mousewheel).

Установка Cloud 9 Сarousel

  1. Подключаем jQuery 1.3.0 и выше или Zepto 1.1.1 и выше
  2. Скачиваем и подключаем jquery.cloud9carousel.js или подключаем как внешний файл из источника.
  3. Назначаем контейнеру карусели и его элементам индетификатор и классы для привязки к плагину.
  4. Инициализируем карусель $(elem).Cloud9Carousel(opt). Подробнее в Код №1.
Код №1: Установка и инициализация плагина Cloud 9 Carousel

Опции плагина

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

Параметры отражения

Для работы необходимо подключить reflection.js и передать параметры для настройки отражений элемента. Например Код №1.2.

Код №1.2: Параметры для настройки отражения.
Опция Описание По умолчанию
gap Вертикальный зазор в пикселях между нижней частью элемента (в полном размере) и верхней частью его отражения 2
height Высота отражения относительно высоты элемента (диапазон: от 0 до 1) 1/3
opacity Непрозрачность отражения в его верхней (наиболее видимой части) (диапазон: от 0 до 1) 0.5
Таблица 1.2: Опции настройки отражения элементов с reflection.js

Методы карусели

Методы из Таблицы 1.3 могут быть вызваны для объекта carousel после инициализации. Например Код №1.3:

Код №1.3: Прокручивание карусели на 2 элемента
Метод Описание Аргументы
go( count ) Вращение карусели count — количество элементов карусели для вращения (+ по часовой стрелке, против часовой стрелки)
goTo( index ) Раскрутите карусель до определенного элемента index: индекс элемента карусели для поворота
nearestIndex() Возвращает индекс на основе 0 ближайшего к фронту элемента (целое число) none
nearestItem() Возвращает ссылку на объект item элемента, который находится ближе всего к фронту (объект Item) none
deactivate() Отключите карусель (в настоящее время необратимо). Вы можете использовать это, чтобы остановить механизм карусели и освободить элементы карусели от него. Затем элементами можно манипулировать без вмешательства плагина. Смотрите, например, когда вы нажимаете, чтобы развернуть галерею. none
itemsRotated() Возвращает интерполированное количество элементов, повернутых из начальной нулевой позиции. В карусели с 5 предметами, сделавшими три оборота по часовой стрелке, значение будет-15. Если карусель далее вращается на полпути к следующему элементу, то значение будет -15.5 (float) none
floatIndex() Возвращает интерполированное значение элемента «индекс» в передней части карусели. Если, например, карусель прошла на 20% мимо пункта 2 к следующему пункту, то floatIndex() вернет 2.2 (float) none
Таблица 1.3: Методы карусели Cloud 9 Carousel

Обратные вызовы событий

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

Код №1.4: Функции обратного вызова для скрытия карусели до загрузки
Обратный вызов Описание
OnLoaded Срабатывает один раз, когда карусель полностью инициализирована
onRendered Срабатывает каждый раз после завершения расчета кадра
onAnimationFinished Срабатывает, когда карусель закончила вращаться
Таблица 1.4:
5 1 голос
Рейтинг статьи
Подписаться
Уведомить о
guest

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии