z-uiDesign system
Componentes · shadcn

Carousel

Carrossel sobre o embla. Arrasta no toque, as setas do teclado trocam o slide e os botões têm rótulo em português.

Páginas do PDF

Pré-visualização do documento antes de assinar. setApi expõe a página atual.

Contrato de prestação de serviços
Partes
Cláusula 1ª · Do objeto
Cláusula 2ª · Do prazo
1 / 5
Cláusula 3ª · Da remuneração
Valor mensal
Forma de pagamento
Reajuste anual pelo IPCA
2 / 5
Cláusula 4ª · Da confidencialidade
Informações protegidas
Vigência da obrigação
Penalidades
3 / 5
Cláusula 5ª · Da rescisão
Aviso prévio de 30 dias
Multa rescisória
Foro
4 / 5
Assinaturas
Contratante
Contratado
Testemunha
5 / 5
Página 1 de 5

Miniaturas

Vários itens por vez com basis-1/3. Bom para escolher a página onde posicionar um campo.

Props

PropTipoPadrãoDescrição
optsEmblaOptionsType—Opções do embla, como align, loop e dragFree.
pluginsEmblaPluginType[]—Plugins do embla, como autoplay.
orientation"horizontal" | "vertical""horizontal"Eixo do carrossel. No vertical, as setas para cima e para baixo trocam o slide.
setApi(api: CarouselApi) => void—Recebe a API do embla para ler e mudar o slide.
CarouselPrevious / CarouselNextButtonProps—Botões de ícone com aria-label "Slide anterior" e "Próximo slide".
<Carousel aria-label="Páginas do contrato">
  <CarouselContent>
    <CarouselItem>Página 1</CarouselItem>
    <CarouselItem>Página 2</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>