Главная » Программирование » 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 комментариев
    Межтекстовые Отзывы
    Посмотреть все комментарии