JS Component

Text Carousel [sw-carousel]

Troca de textos/depoimentos com 9 efeitos de transição (slide × 4 direções, zoom × 2, bounce, flip, fade), swipe e autoplay.

1. Depoimentos

Container com .sw-carousel-trk (os itens) e, opcionalmente, .sw-carousel-dts (pontinhos, preenchidos sozinhos pelo JS) e .sw-carousel-prv/.sw-carousel-nxt (setas). O conteúdo de cada item é livre — aqui um cartão com avatar, nome e cargo. Autoplay de 4s, arraste/swipe sempre ativo.

”

"O SW deixou nosso frontend muito mais rápido de montar."

Ana SilvaCTO, TechStart

"Zero dependências, zero dor de cabeça."

Bruno LimaDev Frontend

"A documentação viva ajudou demais no onboarding."

Carla NunesTech Lead

2. Efeitos de animação `sw-carousel-effect`

Cada card gira sozinho no automático — repare como o mesmo texto entra de um jeito diferente em cada um.

slide-left (padrão)

Slide 1Entrada da direita

Slide 2Entrada da direita

slide-right

Slide 1Entrada da esquerda

Slide 2Entrada da esquerda

slide-up

Slide 1Entrada de baixo

Slide 2Entrada de baixo

slide-down

Slide 1Entrada de cima

Slide 2Entrada de cima

zoom-in

Slide 1Cresce ao entrar

Slide 2Cresce ao entrar

zoom-out

Slide 1Encolhe ao entrar

Slide 2Encolhe ao entrar

bounce

Slide 1Elástico

Slide 2Elástico

flip

Slide 1Rotação 3D

Slide 2Rotação 3D

fade

Slide 1Transição suave

Slide 2Transição suave

3. Variantes mínimas

Quase tudo é opcional. Controles não são obrigatórios — sem eles, ainda dá pra navegar via swipe/arraste ou API. Só .sw-carousel-trk é indispensável.

4. API JavaScript

Controle programático via SW.Carousel, além do evento sw:carousel:change.

5. Sem loop `sw-carousel-loop="false"`

Trava no primeiro e no último item — clicar em "próximo" no último não volta pro início.

1 de 3 — início.

2 de 3 — meio.

3 de 3 — fim, não volta ao clicar em "›" de novo.

Referência

Atributo/Classe	Padrão	Descrição
`.sw-carousel-trk`	—	Obrigatório. Cada filho direto vira um item do carrossel.
`sw-carousel-effect`	`slide-left`	`slide-left\|right\|up\|down · zoom-in\|out · bounce · flip · fade`. Pode ser sobrescrito por item com `sw-carousel-effect` no próprio elemento.
`sw-carousel-dur`	`600`	Duração da transição em ms.
`sw-carousel-loop`	`true`	Volta ao primeiro item após o último.
`sw-carousel-auto`	`0`	Intervalo de autoplay em ms (0 = desligado). Pausa sozinho no hover.
`.sw-carousel-dts`	—	Container de dots (opcional) — deixe vazio, o JS preenche sozinho.
`.sw-carousel-prv` / `.sw-carousel-nxt`	—	Setas de navegação manual (opcional).
Arraste/swipe	—	Sempre ativo — arraste horizontalmente (mouse ou touch) pra trocar de item.
`sw:carousel:change`	—	Evento — `detail.index`.
`SW.Carousel.next/prev/goTo/pause/resume(el)`	—	API programática.