Coverflow Carousel

3D-карусель товаров на нативной прокрутке: свайп с инерцией, стрелки, клавиатура. Pro · 3D и моушн › 3D-объекты и витрины

Установка

npx valyro-cli@latest login
npx valyro-cli@latest add coverflow-carousel

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { CoverflowCarousel } from 'valyro-ui-pro';

Пропсы

Prop	Type	Default
`children`	`ReactNode`		The items, one per child: product cards, covers, plans — anything of the same width.
`index`	`number`		Index of the item in the middle (controlled).
`defaultIndex`	`number`	`0`	Index of the item in the middle at first (uncontrolled).
`onIndexChange`	`(index: number) => void`		Called when another item settles in the middle: by a swipe, the wheel, the arrows or the keyboard.
`itemWidth`	`number`	`240`	Width of an item, px. On a narrow screen items shrink to fit (never below 160 px).
`angle`	`number`	`48`	How far the side items turn away, degrees.
`depth`	`number`	`140`	How far the side items sink back, px.
`overlap`	`number`	`0.2`	Share of an item's width that neighbours overlap, 0–0.4.
`perspective`	`number`	`1100`	Perspective of the scene, px: smaller is more dramatic.
`controls`	`boolean`	`true`	Shows the previous / next buttons.
`labels`	`Partial<CoverflowCarouselLabels>`		Text for assistive technology and the buttons.

Похожие компоненты

Orbit Showcase — 3D-кольцо карточек: перетаскивание с инерцией, стрелки, клавиатура
Flip Card — Карточка с двумя сторонами, переворачивается в 3D
Word Prism — Слово на гранях призмы: поворачивается к следующему
Reveal — Появление любого компонента при прокрутке: подъём, наплыв, 3D-разворот
Stagger — Списки, сетки и строки таблиц появляются волной, один за другим
Tilt — Наклон, подъём, блик и притяжение под курсором для любой карточки
Layout Group — Перестановка без прыжков: фильтр, сортировка, перестроение сетки
Presence — Появление и уход: элемент живёт, пока проигрывается выход
Scene Backdrop — WebGL- или CSS-сцена под обычным интерфейсом: hero, карточки, дашборд
Scroll Cylinder — Строки заголовка на вращающемся цилиндре — поворот от прокрутки
Stacking Panels — Панели прилипают при прокрутке и складываются в стопку
Helix Rail — Карточки на спирали, которая вращается от прокрутки

Назад: Orbit Showcase · Далее: Flip Card · Весь раздел «3D и моушн»