Фото и видео непрерывно едут по внешней стороне цилиндра: передний кадр смотрит прямо на зрителя, а соседние разворачиваются и затемняются к краям. Видео играют только пока видны.
Движение останавливается при наведении, ленту можно протянуть, бросить с инерцией или прокрутить тачпадом. Радиус изгиба и перспектива задают, насколько выпуклой выглядит сцена.
Скопируйте эти файлы в components/bend-carousel/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { BendCarousel } from "@/components/bend-carousel/bend-carousel";
const ITEMS = [
{ src: "/photos/1.webp", alt: "Мост" },
{ src: "/video/clip.mp4", type: "video" as const, alt: "Клип" },
{ src: "/photos/2.webp", alt: "Пляж" },
];
export function Showcase() {
return <BendCarousel items={ITEMS} cardWidth={260} cardHeight={440} radius={900} />;
}items?Фото и видео: адрес, тип, подпись и постер
Тип BendMedia[]·По умолчанию четыре кадра
cardWidth?Ширина карточки в пикселях
Тип number·По умолчанию 260
cardHeight?Высота карточки в пикселях
Тип number·По умолчанию 440
gap?Отступ между карточками
Тип number·По умолчанию 16
radius?Радиус цилиндра в пикселях
Тип number·По умолчанию 900
perspective?Перспектива сцены в пикселях
Тип number·По умолчанию 1400
speed?Скорость в пикселях в секунду
Тип number·По умолчанию 28
dim?Затемнение крайних кадров от 0 до 1
Тип number·По умолчанию 0.45
pauseOnHover?Останавливать при наведении
Тип boolean·По умолчанию true
draggable?Перетаскивание и бросок
Тип boolean·По умолчанию true
wheelControl?Горизонтальная прокрутка тачпадом
Тип boolean·По умолчанию true
mobileScale?Масштаб карточек на телефоне
Тип number·По умолчанию 0.6
direction?Направление движения
Тип 1 | -1·По умолчанию 1
label?Подпись для экранных дикторов
Тип string·По умолчанию "Медиа-карусель"
className?Классы корневого блока
Тип string