Carousel
Exibição rotativa de imagens ou conteúdo com scroll-snap, controles e indicadores.
Carousel
Variações de comportamento
Cards de produtos
Cards de postagens do blog
Cards de aulas — com imagem
Cards de aulas — sem imagem
<!-- Carousel Component -->
<div class="carousel">
Carousel content here
</div>---
import Carousel from '@/components/ui/data-display/Carousel/Carousel.astro';
---
<Carousel />Variantes
start
start
Snap dos itens ao início (padrão)
center
center
Snap dos itens ao centro
end
end
Snap dos itens ao fim
vertical
vertical
Rolagem no eixo vertical
controls
controls
Botões anterior / próximo
indicators
indicators
Indicadores em pontos (dots)
Uso
Quando usar
- Use Carousel para exibição rotativa de imagens ou conteúdo com scroll-snap, controles e indicadores.
- Ideal para interfaces que precisam de exibição de dados
Boas práticas
- Mantenha consistência com outros componentes da mesma categoria
- Considere acessibilidade e estados de interação
- Teste em diferentes tamanhos de tela