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

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

HTML — Пример 3D-карусели c плагином Cloud 9 Carousel

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

Плагин «Cloud 9 Сarousel» из официального источника на GitHub.
Ссылка на облако.

Содержание

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

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



<!-- Подключение 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>

<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>

</div>

<!-- В wpcraft получаем контейнер всех элементов (slider);

В itemClass указываем класс элементов карусели. -->

$(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>

Код №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.



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 */
}

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 */

}

Код №1.2: Параметры для настройки отражения.

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

Таблица 1.2: Опции настройки отражения элементов с reflection.js

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

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



// Вращайте два элемента по часовой стрелке
$("#carousel").data("carousel").go( 2 );

// Вращайте два элемента по часовой стрелке

$("#carousel").data("carousel").go( 2 );

Код №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:



// Скрыть карусель во время загрузки элементов
$("#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") );
  }
} );

// Скрыть карусель во время загрузки элементов

$("#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") );

}

} );

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

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

Таблица 1.4: