# Carrossel (slider) (`carrossel`)

<!-- GERADO por scripts/gerar-catalogo.mjs a partir do componente.json. Para mudar, edite o componente.json e rode o script. -->

Faixa de slides com botões, pontos, setas do teclado e arraste nativo. Um ou vários por vista, passagem automática opcional com pausa. Também é o motor dos slides de depoimentos.

- **Categoria:** Interativos
- **Equivalente no Elementor:** Carrossel de Imagens (Image Carousel) e Slides
- **Arquivos:** `carrossel.html`, `carrossel.css`, `carrossel.js`
- **Precisa de JavaScript:** sim (inicia por `data-ds-carrossel`, `data-ds-carrossel-trilho`, `data-ds-carrossel-anterior`, `data-ds-carrossel-proximo`, `data-ds-carrossel-pontos`, `data-ds-carrossel-pausa`)

## Quando usar
- Fotos de um evento, de um espaço ou de resultados (quando há muitas)
- Cartões que não cabem lado a lado no celular

## Quando não usar
- Para esconder informação importante: o que está no slide 4 quase ninguém vê
- Banner rotativo no topo com mensagens diferentes (escolha uma mensagem)

## Variações
- **Um por vista:** classe ds-carrossel
- **Vários por vista (1, 2, 3 conforme a tela):** classe ds-carrossel--varios
- **Passagem automática:** data-ds-carrossel-auto="segundos" (tem pausa e não roda com movimento reduzido)
- **Sem passagem automática:** sem o atributo data-ds-carrossel-auto

## Conteúdo esperado
- 2 a 8 slides
- Rótulo do carrossel (aria-label)
- Em cada imagem: alt e legenda opcional

## Acessibilidade
- Região com aria-roledescription="carrossel"; cada slide é grupo "n de N"
- Botões anterior e próximo com nome, pontos com aria-current
- Setas do teclado passam slides; a faixa recebe foco e rola
- Passagem automática para com mouse, foco e clique, tem botão de pausa e não roda com prefers-reduced-motion
- Sem JS vira faixa com rolagem lateral: nada fica escondido

## Como carregar

```html
<link rel="stylesheet" href="tokens.css"><!-- do projeto, gerado por gerar-tokens-css.mjs -->
<link rel="stylesheet" href="base/base.css">
<link rel="stylesheet" href="componentes/carrossel/carrossel.css">
<script src="componentes/carrossel/carrossel.js" defer></script>
```

Tokens do contrato usados: `--ds-borda-largura`, `--ds-borda-largura-forte`, `--ds-cor-borda`, `--ds-cor-destaque`, `--ds-cor-sobre-destaque`, `--ds-cor-superficie`, `--ds-cor-texto-suave`, `--ds-cor-titulo`, `--ds-curva`, `--ds-duracao`, `--ds-espaco-1`, `--ds-espaco-2`, `--ds-espaco-4`, `--ds-raio-lg`, `--ds-tamanho-pequeno`.