Вариация классического кавер-флоу, в которой соседние кадры повёрнуты не к центру, а от него: лента выглядит как вогнутая стена, а центральный кадр стоит ровно. Чем дальше кадр от центра, тем сильнее разворот и глубже он уходит в сцену; внутренний край каждого повёрнутого кадра притеняется градиентом.
Лента бесконечная и листается перетаскиванием — разворот и тени пересчитываются непрерывно, пока кадр едет. Точки под лентой переключают кадры напрямую, по желанию включаются стрелки и автопрокрутка.
Скопируйте эти файлы в components/inverted-coverflow/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { InvertedCoverflow } from "@/components/inverted-coverflow/inverted-coverflow";
const images = [
{ src: "/photos/1.webp", alt: "Первый кадр" },
{ src: "/photos/2.webp", alt: "Второй кадр" },
{ src: "/photos/3.webp", alt: "Третий кадр" },
];
export function Wall() {
return <InvertedCoverflow images={images} showPagination rotate={50} />;
}imagesКадры ленты
Тип { src: string; alt: string }[]
className?Классы корневого блока
Тип string
showPagination?Показывать точки-переключатели
Тип boolean·По умолчанию false
showNavigation?Показывать стрелки
Тип boolean·По умолчанию false
loop?Бесконечная прокрутка
Тип boolean·По умолчанию true
autoplay?Автоматическое листание
Тип boolean·По умолчанию false
spaceBetween?Отступ между кадрами в пикселях
Тип number·По умолчанию 0
slideWidth?Ширина кадра в пикселях
Тип number·По умолчанию 300
height?Высота ленты вместе с точками в пикселях
Тип number·По умолчанию 350
rotate?Угол разворота соседних кадров в градусах
Тип number·По умолчанию 40
depth?Насколько соседние кадры уходят в глубину
Тип number·По умолчанию 100
modifier?Множитель силы эффекта
Тип number·По умолчанию 1
speed?Длительность перелистывания в миллисекундах
Тип number·По умолчанию 300
autoplayDelay?Пауза автопрокрутки в миллисекундах
Тип number·По умолчанию 1500