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