Стопка карточек, разложенная веером: каждая следующая карта чуть сдвинута и наклонена относительно верхней, а дальние уходят в глубину. Верхняя карта всегда целиком на виду.
При свайпе верхняя карта отводится в сторону по дуге — она уменьшается, поворачивается и приподнимается, а затем ложится в стопку с другой стороны, открывая следующую, и притеняется. Лента бесконечная; по желанию включаются точки, стрелки и автопрокрутка.
Скопируйте эти файлы в components/card-swipe-carousel/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { CardSwipeCarousel } from "@/components/card-swipe-carousel/card-swipe-carousel";
const images = [
{ src: "/photos/1.webp", alt: "Первая карта" },
{ src: "/photos/2.webp", alt: "Вторая карта" },
{ src: "/photos/3.webp", alt: "Третья карта" },
];
export function Deck() {
return <CardSwipeCarousel images={images} perSlideRotate={3} />;
}imagesКарточки
Тип { src: string; alt: string }[]
className?Классы корневого блока
Тип string
showPagination?Показывать точки-переключатели
Тип boolean·По умолчанию false
showNavigation?Показывать стрелки
Тип boolean·По умолчанию false
loop?Бесконечная прокрутка
Тип boolean·По умолчанию true
autoplay?Автоматическое листание
Тип boolean·По умолчанию false
spaceBetween?Дополнительная длина свайпа между картами в пикселях
Тип number·По умолчанию 40
perSlideRotate?Наклон каждой следующей карты в градусах
Тип number·По умолчанию 2
perSlideOffset?Сдвиг каждой следующей карты в процентах ширины
Тип number·По умолчанию 8
cardWidth?Ширина карты в пикселях
Тип number·По умолчанию 260
cardHeight?Высота области карты в пикселях
Тип number·По умолчанию 380
radius?Скругление карт в пикселях
Тип number·По умолчанию 24
speed?Длительность перелистывания в миллисекундах
Тип number·По умолчанию 300
autoplayDelay?Пауза автопрокрутки в миллисекундах
Тип number·По умолчанию 1000