Pharos
Navegar componentes
← Componentes

Carousel

MiscExemplo
Carousel rola uma linha de itens horizontalmente quando eles excedem a largura disponível. Use para grids de cards, galerias de imagens, listas de produtos ou qualquer conjunto de itens navegável sem ocupar a página inteira.
Importação
import {Carousel} from '@pharos-ds/core/Carousel';

Exemplos

Área interativa

hasButtons
hasSnap
hasEdgeFade
Usina solar
Usina solarSlide 1 de 6
Entardecer
EntardecerSlide 2 de 6
Painéis
PainéisSlide 3 de 6
Horizonte
HorizonteSlide 4 de 6
Campo
CampoSlide 5 de 6
Reflexo
ReflexoSlide 6 de 6
Código
import {Carousel} from '@pharos-ds/core/Carousel';

<Carousel
  hasButtons
  hasSnap
  hasEdgeFade
 />

Boas práticas

  • Faça: Ative scroll-snap quando cada item deve encaixar precisamente na borda inicial, como em uma galeria ou lista de produtos.
  • Faça: Sempre forneça um aria-label que descreva o conteúdo do carousel, como "Produtos em destaque" ou "Membros da equipe".
  • Faça: Use gap e largura de item consistentes, para que o carousel pareça intencional, não conteúdo transbordando por acidente.
  • Faça: Confie na navegação integrada: usuários de trackpad podem deslizar horizontalmente, e usuários de mouse podem segurar Shift enquanto rolam a roda para percorrer os itens.
  • Evite: Use um carousel para conteúdo que todo usuário precisa ver. Nem todos rolam horizontalmente; coloque conteúdo crítico acima da dobra.
  • Evite: Avance itens automaticamente. Deixe o usuário rolar no próprio ritmo.
  • Evite: Aninhe carousels. Um carousel dentro de outro é confuso e quebra a navegação por teclado.

Props

PropTipoPadrãoDescrição
children *ReactNode—Itens do carousel renderizados em um container de rolagem horizontal.
gap0 | 0.5 | 1 | 1.5 | 2 | 3 | 41Espaçamento entre itens usando a escala de tokens de spacing.
hasButtonsbooleantrueMostra botões de navegação anterior/próximo quando o conteúdo é rolável.
hasEdgeFadebooleantrueMostra uma máscara de gradiente nas bordas quando o conteúdo transborda, sinalizando que há mais itens fora da tela.
hasSnapbooleanfalseAtiva scroll-snap para que cada filho encaixe na borda inicial.
padding0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10—Padding inline dentro do container de rolagem, com scroll-padding correspondente para que os pontos de snap alinhem com a borda do conteúdo.
aria-labelstring'Carousel'Rótulo acessível para a região do carousel.
refReact.Ref<HTMLDivElement>—Ref encaminhada para o elemento raiz.
xstyleStyleXStyles—Estilos StyleX para customização de layout (margens, posicionamento, dimensionamento). Deve ser um valor stylex.create().
classNamestring—Nome de classe CSS para o elemento raiz. Prefira xstyle para estilização.
styleCSSProperties—Estilos inline para o elemento raiz. Prefira xstyle.
data-testidstring—Seletor de teste para frameworks de testes automatizados.
Pacote: @pharos-ds/core · Import: @pharos-ds/core/Carousel
Carousel · Pharos