Сначала миниатюры по одной появляются в узкой ленте, затем лента разворачивается в полноразмерную бесконечную карусель. Её можно тянуть мышью или пальцем, листать колесом и стрелками: при быстром движении слайды растягиваются как резина и смазываются, а на остановке мягко встают на место.
При наведении на слайд рядом с курсором появляется подпись, клик открывает кадр крупно и раздвигает соседей. Отрисовка идёт через WebGL, счётчик снизу показывает номер текущего слайда.
Скопируйте эти файлы в components/elastic-carousel/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { ElasticCarousel } from "@/components/elastic-carousel/elastic-carousel";
export function Gallery() {
return <ElasticCarousel height={560} thumbHeight={64} gap={16} showCounter cursorLabel="Смотреть" />;
}items?Слайды: src, alt, title
Тип ElasticSlide[]·По умолчанию восемь фото
height?Высота сцены на десктопе
Тип number·По умолчанию 560
mobileHeight?Высота сцены на телефоне
Тип number·По умолчанию 60% от height
mobileScale?Масштаб размеров на телефоне
Тип number·По умолчанию 0.6
thumbHeight?Высота миниатюр в свёрнутой ленте
Тип number·По умолчанию 64
slideHeight?Высота развёрнутого слайда
Тип number·По умолчанию 60% высоты сцены
gap?Отступ между развёрнутыми слайдами
Тип number·По умолчанию 16
thumbGap?Отступ между миниатюрами
Тип number·По умолчанию 8
stretch?Сила растяжения в движении
Тип number·По умолчанию 1
blur?Сила размытия в движении
Тип number·По умолчанию 1
wheelControl?Листать колесом и тачпадом
Тип boolean·По умолчанию true
defaultExpanded?Показать карусель сразу развёрнутой
Тип boolean·По умолчанию false
autoExpand?Разворачивать ленту после появления миниатюр
Тип boolean·По умолчанию true
showCounter?Показывать счётчик слайдов
Тип boolean·По умолчанию true
cursorLabel?Подпись у курсора над слайдом
Тип string·По умолчанию "Смотреть"
label?Доступное имя карусели
Тип string·По умолчанию "Эластичная карусель"
className?Классы корневого блока
Тип string