# Slides de depoimentos (`depoimentos-slides`)

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

Depoimentos em faixa deslizante: um por vista no celular, dois no tablet e três no computador.

- **Categoria:** Interativos
- **Equivalente no Elementor:** Carrossel de Depoimentos (Testimonial Carousel)
- **Arquivos:** `depoimentos-slides.html`, `depoimentos-slides.css`
- **Precisa de JavaScript:** não
- **Depende de:** `carrossel`, `depoimento`

## Quando usar
- Muitos depoimentos (4 ou mais) sem ocupar a página inteira

## Quando não usar
- Até 3 depoimentos: mostre todos em grade (ds-grade + ds-depoimento)
- Depoimento principal que todo mundo precisa ler

## Variações
- **Vários por vista:** classes ds-carrossel ds-carrossel--varios (padrão)
- **Um por vista:** tirar ds-carrossel--varios
- **Passagem automática:** data-ds-carrossel-auto="segundos" e o botão de pausa do carrossel

## Conteúdo esperado
- 4 a 10 depoimentos reais
- Rótulo do carrossel

## Acessibilidade
- Herda tudo do carrossel (teclado, pontos, pausa)
- Herda tudo do depoimento (figure, blockquote, autoria)

## 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">
<link rel="stylesheet" href="componentes/depoimento/depoimento.css">
<link rel="stylesheet" href="componentes/depoimentos-slides/depoimentos-slides.css">
<script src="componentes/carrossel/carrossel.js" defer></script>
```

Tokens do contrato usados: `--ds-espaco-1`, `--ds-espaco-2`, `--ds-espaco-4`, `--ds-sombra-sm`.