Carousel
Carrossel de conteúdo com navegação por botões e teclado. Construído sobre Embla Carousel. Ideal para galerias de produtos, banners e showcases.
import {
Carousel, CarouselContent, CarouselItem,
CarouselNext, CarouselPrevious,
} from "@workspace/ui/components/carousel";
<Carousel>
<CarouselContent>
<CarouselItem>Slide 1</CarouselItem>
<CarouselItem>Slide 2</CarouselItem>
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>Básico
Carrossel simples com navegação.
Múltiplos por vez
Exibindo vários itens com basis-1/3.
Galeria de Produtos
Carrossel de produtos do catálogo com imagens reais e informações de preço.
Alioth
Body Splash 200ml
Leve e refrescante, com fragrância suave e toque hidratante.
R$ 69,90
Mizar
Hidratante Corporal 340ml
Nutre intensamente a pele, proporcionando maciez e toque sedoso.
R$ 189,90
Alioth
Body Gloss 60ml
Brilho natural e hidratação leve para o corpo todo.
R$ 49,90
Mizar
Body Splash 200ml
Fragrância envolvente com notas florais e amadeiradas.
R$ 69,90
Alioth
Eau de Parfum 50ml
Perfume intenso e sofisticado com longa duração.
R$ 189,90
Showcase
Carrossel com foco central, transição de escala e indicadores de navegação. Ideal para banners e destaques de linhas de produto.
API Reference
| Prop | Type | Default | Descrição |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Direção de rolagem do carrossel |
opts | EmblaOptionsType | — | Opções do Embla Carousel (loop, align, etc.) |
plugins | EmblaPluginType[] | — | Plugins (autoplay, fade, etc.) |
setApi | (api: CarouselApi) => void | — | Callback para acessar a API do Embla |
CarouselItem.className | string | — | Use basis-1/N para controlar itens visíveis (ex: basis-1/3) |