Полноширинная карусель для крупных фотографий: следующий кадр наезжает поверх текущего справа, а прежний не уезжает, а отступает вглубь сцены и уходит под новый — кадры будто складываются в стопку.
В демо карусель листается сама, но её можно в любой момент перетащить мышью или пальцем — автопрокрутка после этого останавливается. Точки под лентой переключают кадры напрямую.
Скопируйте эти файлы в components/creative-stack-carousel/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { CreativeStackCarousel } from "@/components/creative-stack-carousel/creative-stack-carousel";
const images = [
{ src: "/photos/1.webp", alt: "Первый кадр" },
{ src: "/photos/2.webp", alt: "Второй кадр" },
{ src: "/photos/3.webp", alt: "Третий кадр" },
];
export function Hero() {
return <CreativeStackCarousel images={images} autoplay showPagination autoplayDelay={3000} />;
}imagesКадры карусели
Тип { src: string; alt: string }[]
className?Классы корневого блока
Тип string
showPagination?Показывать точки-переключатели
Тип boolean·По умолчанию false
showNavigation?Показывать стрелки
Тип boolean·По умолчанию false
loop?Бесконечная прокрутка
Тип boolean·По умолчанию true
autoplay?Автоматическое листание
Тип boolean·По умолчанию false
spaceBetween?Дополнительная длина свайпа между кадрами в пикселях
Тип number·По умолчанию 0
depth?Насколько уходящий кадр отступает в глубину
Тип number·По умолчанию 400
prevScale?Масштаб уходящего кадра
Тип number·По умолчанию 1
height?Высота ленты вместе с точками в пикселях
Тип number·По умолчанию 440
radius?Скругление кадров в пикселях
Тип number·По умолчанию 25
speed?Длительность смены кадра в миллисекундах
Тип number·По умолчанию 300
autoplayDelay?Пауза автопрокрутки в миллисекундах
Тип number·По умолчанию 1500