Ravox KitSuperfícies
Carrossel
Feito sobre o scroll-snap do navegador: toque, inércia e trackpad funcionam como numa rolagem comum. Setas, pontos, teclado, arrastar com o mouse, vários slides por vez e autoplay que pausa no hover e no foco e nem começa com movimento reduzido.
Ajustes
Exemplos
Vários por vez, conforme a tela
Avisos com autoplay e pausa
Setas por cima, contador próprio
Instalação
O shadcn cria components/ui/carrossel.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.
npx shadcn@latest add https://ui.ravoxlabs.com/r/carrossel.jsonOpções
| Opção | Tipo | Padrão | O que faz |
|---|---|---|---|
| rotulo | string | — | Nome do carrossel para leitores de tela. Obrigatório (Carrossel). |
| porVez | number | 1 | Slides visíveis juntos. Por tela, use classes: [--por-vez:1] md:[--por-vez:3] (Carrossel). |
| vao | number | 16 | Espaço entre os slides, em px (Carrossel). |
| laco | boolean | false | Do último volta ao primeiro, e vice-versa (Carrossel). |
| autoplay | number | — | Troca sozinho a cada tantos ms. Pausa com o mouse em cima ou o foco dentro, e liga o laço (Carrossel). |
| aoMudar | (pagina: number) => void | — | Quando a página muda, a partir de 0 (Carrossel). |
| CarrosselTrilho / CarrosselItem | ComponentProps<"div"> | — | A faixa que rola (focável: ← → Home End) e cada slide, lido como "2 de 5". |
| CarrosselAnterior / Proximo / Pontos / Pausa | ComponentProps<"button"> | — | Os controles. Ponha onde quiser dentro do Carrossel; a Pausa só aparece com autoplay. |
| useCarrossel() | { pagina, paginas, irPara, anterior, proximo } | — | Para montar controles próprios (miniaturas, contador). |