3D и WebGLНовое
Карусель-куб
Слайды лежат на гранях 3D-куба, и он поворачивается к следующему. Листать можно кнопками, перетаскиванием или автоматически.
Настройки
faceColor
edgeColor
Основано на Box Carousel (MIT лицензия) · Условия использования
Ещё в Pro
Смотреть всеПараметры
18 параметров| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| items | { id: string; type: 'image' | 'video'; src: string; alt?: string; poster?: string }[] | — | Слайды: картинки или видео. |
| width | number | 280 | Ширина куба, в пикселях. |
| height | number | 200 | Высота куба, в пикселях. |
| direction | 'top' | 'bottom' | 'left' | 'right' | "left" | В какую сторону поворачивается куб. |
| perspective | number | 600 | Глубина перспективы: меньше значит сильнее 3D. |
| autoPlay | boolean | false | Листать слайды автоматически. |
| autoPlayInterval | number | 3000 | Пауза между автопереходами, в миллисекундах. |
| enableDrag | boolean | true | Разрешить поворот перетаскиванием. |
| dragSensitivity | number | 0.5 | Насколько сильно куб поворачивается при перетаскивании. |
| transition | ValueAnimationOptions | "{ duration: 1.25, ease: [0.953, 0.001, 0.019, 0.995] }" | Анимация поворота по кнопке. |
| snapTransition | ValueAnimationOptions | "{ type: 'spring', damping: 30, stiffness: 200 }" | Как куб встаёт на место после перетаскивания. |
| dragSpring | { stiffness?: number; damping?: number; mass?: number } | "{ stiffness: 200, damping: 30 }" | Пружина во время перетаскивания. |
| debug | boolean | false | Подсветить грани куба для отладки. |
| onIndexChange | (index: number) => void | — | Вызывается при смене слайда. |
| ref | { next(): void; prev(): void; getCurrentItemIndex(): number } | — | Управление каруселью из кода. |
| faceColor | string | "#171717" | Фон граней куба. Виден за прозрачными картинками и пока они грузятся. |
| edgeColor | string | "rgba(255, 255, 255, 0.1)" | Тонкая рамка по краю каждой грани. |
| className | string | — | Дополнительные классы. |
Зависимости
Пакетов: 3
npm install motion clsx tailwind-merge