Carregando…
Carregando…
Carregando…Horizontal/vertical image or card carousel with dots and auto-play.
$ npx kikitocn add carouselimport { Carousel } from "@/components/ui/cn/carousel/Carousel";
export function CarouselExample() {
return (
<Carousel indicator="counter">
<div className="p-8 bg-raised rounded-lg">Slide 1</div>
<div className="p-8 bg-raised rounded-lg">Slide 2</div>
<div className="p-8 bg-raised rounded-lg">Slide 3</div>
</Carousel>
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
items* | CarouselItem[] | — | Array de { id, content } |
autoPlay | boolean | false | Rotação automática |
autoPlayInterval | number | 3000 | Intervalo de rotação (ms) |
loop | boolean | true | Volta ao primeiro após o último |
showDots | boolean | true | Exibir indicadores de página |
showArrows | boolean | true | Exibir botões de navegação |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Orientação do carrossel — vertical exige altura explícita no próprio componente via className/style |
className | string | — | Classes CSS extras |
style | CSSProperties | — | Estilos inline pro container |
Horizontal with dots
Vertical with dots
indicator="counter" (minimal gallery style)