Карусель сама листает слайды по таймеру. Активный индикатор вытягивается в полоску и постепенно заполняется, а когда заполнится, текущий слайд уезжает в сторону с размытием и на его место проявляется следующий.
Стрелки по бокам и точки-индикаторы позволяют переключить слайд вручную — таймер при этом начинается заново, а направление ухода слайда зависит от того, листаете вы вперёд или назад.
Скопируйте эти файлы в components/dia-carousel/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { DiaCarousel } from "@/components/dia-carousel/dia-carousel";
const items = [
{ src: "/photos/1.webp", label: "Первый слайд" },
{ src: "/photos/2.webp", label: "Второй слайд" },
];
export function Showcase() {
return <DiaCarousel items={items} title="Новый релиз" tickMs={80} />;
}itemsСлайды: src и label (альтернативный текст)
Тип DiaCarouselItem[]
title?Заголовок
Тип string·По умолчанию "UI для будущего"
subtitle?Подзаголовок
Тип string·По умолчанию "Коллекция необычных UI-компонентов"
caption?Подпись над слайдом
Тип string·По умолчанию "Доступно в Astra CLI 3.0"
tickMs?Шаг таймера, мс; слайд показывается 100 шагов
Тип number·По умолчанию 50
imageHeight?Высота слайда, px
Тип number·По умолчанию 550
imageWidth?Максимальная ширина слайда, px
Тип number·По умолчанию 768
className?Классы корневого блока
Тип string