Carousel vs. Marquee
Um carrossel mostra slides separados com controles. Um marquee mantém uma linha de conteúdo em movimento.
Use um carrossel quando cada item precisar de tempo e controles. Use um letreiro apenas para decoração sem importância que pode pausar e parar de se mover quando solicitado.
Veja o que cada padrão faz
Experimente cada exemplo. Depois leia sobre o trabalho para o qual ele foi feito.
Carousel
Um carrossel mostra um ou alguns painéis de cada vez. As pessoas o movimentam com setas, pontos ou deslizes.
Uma galeria de fotos tem os botões de Anterior e Próximo, e mostra o número do slide. Suporta deslizar a tela e dá para pausar o modo automático.
- Use-o quando
- Use-o quando os itens tiverem uma ordem, mas não houver espaço suficiente para mostrar todos.
- Não o use quando
- Nunca esconda escolhas importantes em um carrossel ou faça com que ele se mova muito rapidamente sozinho.
- Nome usado no código
aria-roledescription="carousel"
Faixa de destaque
Uma faixa de conteúdo repetido que fica se movendo. Ela deve oferecer controles ou uma versão parada para pessoas sensíveis a movimento.
Uma página de festival move uma lista curta de patrocinadores devagar. Pausa ao passar o mouse ou focar e vira uma lista parada e agrupada sob reduced motion.
- Use-o quando
- Use-o apenas para conteúdo curto e repetido que não seja essencial. O movimento pode adicionar humor, mas não deve bloquear a leitura.
- Não o use quando
- Nunca o use para instruções, texto longo, mensagens urgentes ou palavras que as pessoas precisam procurar para ler.
- Nome usado no código
overflow clip + duplicated track + prefers-reduced-motion
Comparação rápida
| Padrão de UI | Melhor para | Não para | Nome usado no código |
|---|---|---|---|
| CarouselCarousel | Use-o quando os itens tiverem uma ordem, mas não houver espaço suficiente para mostrar todos. | Nunca esconda escolhas importantes em um carrossel ou faça com que ele se mova muito rapidamente sozinho. | aria-roledescription="carousel" |
| Faixa de destaqueMarquee | Use-o apenas para conteúdo curto e repetido que não seja essencial. O movimento pode adicionar humor, mas não deve bloquear a leitura. | Nunca o use para instruções, texto longo, mensagens urgentes ou palavras que as pessoas precisam procurar para ler. | overflow clip + duplicated track + prefers-reduced-motion |
Antes de lançar
- 01
Anote o que a pessoa precisa fazer.
- 02
Teste o teclado, foco, toque, zoom, carregamento, estados vazio e de erro.
- 03
Certifique-se de que as pessoas podem obter as mesmas informações sem passar o mouse ou movimento.
- 04
Teste com conteúdo real em telas pequenas e grandes.
Pedido de comparação para copiar
Copie isso quando o seu time precisar de ajuda para escolher entre os padrões.
Escolha o melhor padrão de Carousel (Carousel), Faixa de destaque (Marquee) para o nosso fluxo real de usuário. Use esta regra: Um carrossel mostra slides separados com controles. Um marquee mantém uma linha de conteúdo em movimento. Anote a tarefa, a quantidade de conteúdo e o custo de parar o fluxo. Teste o comportamento de teclado, toque, carregamento, erro e movimento reduzido. Explique sua escolha e depois construa a menor versão acessível com o sistema de design do projeto.