Карусель со скруглёнными кадрами, которые перелистываются как страницы книги. Уходящий кадр поворачивается вокруг своего левого края, складываясь в глубину, а следующий разворачивается из-за правого края и встаёт на место.
Эффект следует за пальцем при перетаскивании, так что страницу можно «придержать» на полпути. Точки под лентой переключают кадры, лента бесконечная; угол сгиба, глубина и сдвиг соседних кадров настраиваются.
Скопируйте эти файлы в components/creative-carousel/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { CreativeCarousel } from "@/components/creative-carousel/creative-carousel";
const images = [
{ src: "/photos/1.webp", alt: "Первая страница" },
{ src: "/photos/2.webp", alt: "Вторая страница" },
{ src: "/photos/3.webp", alt: "Третья страница" },
];
export function Book() {
return <CreativeCarousel images={images} showPagination foldAngle={80} />;
}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·По умолчанию 440
radius?Скругление кадров в пикселях
Тип number·По умолчанию 25
foldAngle?Угол, на который складывается кадр, в градусах
Тип number·По умолчанию 100
depth?Насколько соседние кадры уходят в глубину
Тип number·По умолчанию 200
shift?Боковой сдвиг соседних кадров в процентах
Тип number·По умолчанию 5
speed?Длительность перелистывания в миллисекундах
Тип number·По умолчанию 300
autoplayDelay?Пауза автопрокрутки в миллисекундах
Тип number·По умолчанию 1500
accentColor?Цвет активной точки; по умолчанию фирменный цвет темы
Тип string