Pular para o conteúdo principal

Componente Carousel

📘 Modo de Uso​

O componente Carousel permite aos usuários navegar por uma série de itens como uma apresentação de slides. Ele é comumente posicionado no banner principal de uma página para exibir múltiplos conteúdos no mesmo espaço.

Adicionando novos slides​

Para adicionar mais slides ao componente, em completeView, ative os booleanos de hasSecond até hasSixth. Essas propriedades ativam novos itens à direita do item inicial, com a quantidade máxima de seis itens.

Estilizando os indicadores​

Cada indicador pode ter seu estilo e estado configurado individualmente:

  • O estado é definido através do booleano isSelected, variando entre selecionado e não selecionado.
  • O estilo pode ser alterado em style.

🧩 Anatomia​

Anatomia

📋 Propriedades​

Propriedades

⌨️ Código​

  • opl.surfaces.component.carousel

🛡️ Boas Práticas e Acessibilidade​

  • Os carrosséis devem permitir as seguintes funcionalidades de teclado:
    • Tab: move o foco para frente através dos elementos do carrossel.
    • Shift + Tab: move o foco para trás através dos elementos do carrossel.
    • WCAG 2.1: 2.1.1 Teclado.
  • Evite imagens com texto incorporado, a menos que façam parte de um logotipo. Use o texto dentro do título ou do conteúdo do corpo.
    • WCAG 2.1: 1.4.5 Imagens de texto.
  • Use indicadores de slides sempre que possível, mostrando quantos existem e qual está ativo.
  • Evite grandes quantidades de slides: limite a no máximo 5, com até 1–2 linhas de texto simples e legível por slide.