Содержание
Задача. Необходимо сделать 3D-карусель изображений с помощью JavaScript плагина «Cloud 9 Сarousel».
Решение. Плагин «Cloud 9 Сarousel» работает с библиотеками jQuery и Zepto, поддерживает прокрутку колесом мыши (нужно установить плагин mousewheel).
Установка Cloud 9 Сarousel
- Подключаем jQuery 1.3.0 и выше или Zepto 1.1.1 и выше
- Скачиваем и подключаем jquery.cloud9carousel.js или подключаем как внешний файл из источника.
- Назначаем контейнеру карусели и его элементам индетификатор и классы для привязки к плагину.
- Инициализируем карусель
$(elem).Cloud9Carousel(opt)
. Подробнее в Код №1.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!-- Подключение jQuery и Cloud 9 Сarousel--> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://specious.github.io/cloud9carousel/js/lib/jquery.cloud9carousel.js"></script> <!-- Стили --> <!-- Нужно задать высоту слайдера --> <style> #slider { height: 280px; margin-top: 20px; } #buttons-slider > .right, #buttons-slider > .left, .cloudcarousel { cursor: pointer; filter: drop-shadow(1px 3px 3px #666);} #buttons-slider { text-align: center; } </style> <!-- Контейнер с элементами карусели --> <div class="slider" id="slider"> <img alt="Аватар" title="Аватар" class="cloudcarousel" src="https://wpcraft.top/wp-content/uploads/2022/04/avatar.png"> <img alt="HTML" title="HTML" class="cloudcarousel" src="https://wpcraft.top/wp-content/uploads/2022/06/html.png"> <img alt="PHP" title="PHP" class="cloudcarousel" id="resp2" src="https://wpcraft.top/wp-content/uploads/2022/06/php.png"> <img alt="Wordpress" title="WP" class="cloudcarousel" src="https://wpcraft.top/wp-content/uploads/2022/06/wordpress.png"> <img alt="CSS" title="CSS" class="cloudcarousel" src="https://wpcraft.top/wp-content/uploads/2022/06/css.png"> <img alt="JavaScript" title="Javascript" class="cloudcarousel" src="https://wpcraft.top/wp-content/uploads/2022/06/javascript.png"> </div> <div id="buttons-slider"> <button class="left">←</button> <button class="right">→</button> </div> <!-- Инициализация --> <!-- В wpcraft получаем контейнер всех элементов (slider); В itemClass указываем класс элементов карусели. --> <script> $(function() { var wpcraft = $("#slider"); wpcraft.Cloud9Carousel({ yOrigin: 30, yRadius: 30, itemClass: "cloudcarousel", buttonLeft: $("#buttons-slider > .left"), buttonRight: $("#buttons-slider > .right"), bringToFront: true, onLoaded: function() { wpcraft.css('visibility', 'visible') wpcraft.fadeIn( 100 ) } }) })</script> |
Опции плагина
Опция | Описание | По умолчанию |
---|---|---|
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» |
Параметры отражения
Для работы необходимо подключить reflection.js и передать параметры для настройки отражений элемента. Например Код №1.2.
1 2 3 4 5 6 7 |
mirror: { gap: 12, /* 12 pixel gap between item and reflection */ height: 0.2, /* 20% of item height */ opacity: 0.4 /* 40% opacity at the top */ } |
Опция | Описание | По умолчанию |
---|---|---|
gap | Вертикальный зазор в пикселях между нижней частью элемента (в полном размере) и верхней частью его отражения | 2 |
height | Высота отражения относительно высоты элемента (диапазон: от 0 до 1) | 1/3 |
opacity | Непрозрачность отражения в его верхней (наиболее видимой части) (диапазон: от 0 до 1) | 0.5 |
Методы карусели
Методы из Таблицы 1.3 могут быть вызваны для объекта carousel после инициализации. Например Код №1.3:
1 2 3 4 |
// Вращайте два элемента по часовой стрелке $("#carousel").data("carousel").go( 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.4:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// Скрыть карусель во время загрузки элементов $("#carousel").css( 'visibility', 'hidden' ).Cloud9Carousel( { bringToFront: true, onLoaded: function( carousel ) { // Показать карусель $(carousel).css( 'visibility', 'visible' ); alert( 'Carousel is ready!' ); }, onRendered: function( carousel ) { var item = $(carousel).data("carousel").nearestItem(); console.log( "Item closest to the front: " + $(item).attr("alt") ); } } ); |
Обратный вызов | Описание |
---|---|
OnLoaded | Срабатывает один раз, когда карусель полностью инициализирована |
onRendered | Срабатывает каждый раз после завершения расчета кадра |
onAnimationFinished | Срабатывает, когда карусель закончила вращаться |