Создание 3D вращающейся карусели с помощью CSS и JavaScript

Улучшение с помощью JavaScript

Увидев базовый CSS, лежащий в основе карусели, теперь JavaScript можно использовать для улучшения компонента несколькими способами, такими как:

• Произвольное количество изображений
• Изображения с шириной в процентах
• Несколько экземпляров карусели на странице
• Конфигурации для каждого экземпляра, такие как размер зазора и видимость задней поверхности
• Конфигурация с использованием HTML5 data- * атрибутов

Сначала я удаляю из таблицы стилей переменные и правила, относящиеся к источникам преобразования и поворотам, потому что это будет сделано с использованием JavaScript:

 $item-width: 40%; // Now we can use percentages $item-separation: 0px; // This now is set with Js $viewer-distance: 500px; .carousel { padding: 20px; perspective: $viewer-distance; overflow: hidden; display: flex; flex-direction: column; align-items: center; > * { flex: 0 0 auto; } figure { margin: 0; width: $item-width; transform-style: preserve-3d; transition: transform 0.5s; img { width: 100%; box-sizing: border-box; padding: 0 $item-separation / 2; &:not(:first-of-type) { position: absolute; left: 0; top: 0; } } } } 

Следующей в скрипте является функция carousel() которая заботится об инициализации экземпляра:

 function carousel(root) { // coming soon... } 

root аргумент относится к элементу DOM, который содержит карусель.

Обычно эта функция является конструктором для генерации одного объекта для каждой карусели на странице, но здесь я не пишу библиотеку каруселей, поэтому простой функции будет достаточно.

Чтобы создать несколько компонентов на одной странице, код ожидает загрузки всех изображений, регистрирует прослушиватель в объекте окна для события load , а затем вызывает carousel() для каждого элемента с классом carousel :

 window.addEventListener('load', () => { var carousels = document.querySelectorAll('.carousel'); for (var i = 0; i < carousels.length; i++) { carousel(carousels[i]); } }); 

carousel() выполняет три основные задачи:

• Настройка навигации. Это тот же код, представленный во второй демонстрации CodePen
• Настройка преобразований
• Зарегистрируйте слушателя изменения размера окна, чтобы карусель реагировала, адаптируя ее к новому размеру области просмотра

Прежде чем исследовать код настройки преобразования, я рассмотрю некоторые ключевые переменные и то, как они инициализируются на основе конфигурации экземпляра:

 var figure = root.querySelector('figure'), images = figure.children, n = images.length, gap = root.dataset.gap || 0, bfc = 'bfc' in root.dataset ; 

Количество изображений ( n ) инициализируется на основе количества дочерних элементов элемента <figure> . Разделение между слайдами ( gap ) инициализируется из атрибута data-gap HTML5, если он установлен. Флаг видимости задней стороны ( bfc ) читается с использованием API набора данных HTML5. Это будет использовано позже, чтобы определить, должны ли изображения на обратной стороне карусели быть видимыми или нет.

Установка CSS-преобразований

Код, который устанавливает свойства, связанные с преобразованиями CSS, инкапсулирован в setupCarousel() . Эта вложенная функция принимает два аргумента. Первый — это количество элементов в карусели, то есть переменная n представленная выше. Второй параметр s — это длина стороны многоугольника карусели. Как я упоминал ранее, это равно ширине изображений, поэтому можно прочитать текущую ширину одного из них с помощью getComputedStyle() :

 setupCarousel(n, parseFloat(getComputedStyle(images[0]).width)); 

Таким образом, ширина изображения может быть установлена ​​с процентными значениями.

Чтобы сохранить отзывчивость карусели, я регистрирую слушателя для события resize окна, setupCarousel() снова вызывает setupCarousel() с измененным (в конечном итоге) измененным размером изображений:

 window.addEventListener('resize', () => { setupCarousel(n, parseFloat(getComputedStyle(images[0]).width)); }); 

Ради простоты я не опровергаю слушателя изменения размера.

Первое, что setupCarousel() , это вычисляет апофеон многоугольника, используя переданные параметры и ранее обсужденную формулу:

 apothem = s / (2 * Math.tan(Math.PI / n)); 

Затем это значение используется для изменения источника преобразования элемента figure, чтобы получить новую ось вращения карусели:

 figure.style.transformOrigin = `50% 50% ${-apothem}px`; 

Далее применяются стили для изображений:

 for (var i = 0; i < n; i++) { images[i].style.padding = `${gap}px`; } for (i = 1; i < n; i++) { images[i].style.transformOrigin = `50% 50% ${- apothem}px`; images[i].style.transform = `rotateY(${i * theta}rad)`; } if (bfc) { for (i = 0; i < n; i++) { images[i].style.backfaceVisibility = 'hidden'; } } 

Первый цикл назначает отступ для пространства между элементами карусели. Второй цикл устанавливает 3D-преобразования. Последний цикл обрабатывает задние грани, если соответствующий флаг был указан в конфигурации карусели.

Наконец, rotateCarousel() чтобы вывести текущее изображение вперед. Это небольшая вспомогательная функция, которая, учитывая индекс изображения, которое нужно показать, вращает элемент рисунка вокруг своей оси y, чтобы переместить целевое изображение вперед. Он также используется кодом навигации для перехода вперед и назад:

 function rotateCarousel(imageIndex) { figure.style.transform = `rotateY(${imageIndex * -theta}rad)`; } 

Вот конечный результат, демонстрация, где создаются несколько каруселей, каждая из которых имеет свою конфигурацию: