Slider - SW Docs

Estrutura básica

Todo slider segue o mesmo esqueleto — o que muda entre as variantes abaixo são só os atributos no container e a presença (ou não) das peças opcionais.

Peça	Obrigatória?	Papel
`[sw-slider]`	Sim	Container raiz. Precisa de uma altura definida (CSS/inline) — os itens acompanham essa altura.
`.sw-slider-trk`	Sim	Trilho — o elemento que efetivamente desliza/troca de opacidade.
`.sw-slider-it`	Sim (2+)	Cada slide. O conteúdo de dentro é livre — texto, imagem, o que quiser.
`.sw-slider-prv` / `.sw-slider-nxt`	Opcional	Setas de navegação manual.
`.sw-slider-dot-grp`	Opcional	Deixe a `<div>` vazia — o JS preenche os pontinhos sozinho, um por página.
`.sw-slider-ply`	Opcional	Botão de play/pause manual do autoplay.

1. Básico

O mínimo pra funcionar: container com altura, trilho, itens. Aqui com autoplay de 3.5s.

Slide 1

Slide 2

Slide 3

2. Autoplay, pausa no hover e play/pause manual

Por padrão, se sw-slider-auto estiver ligado, passar o mouse em cima pausa o avanço automático. sw-slider-hover="run" desliga essa pausa. O botão .sw-slider-ply (opcional) dá controle manual, independente do hover.

A

B

C

3. Itens visíveis e velocidade de avanço

sw-slider-show controla quantos itens aparecem por vez. sw-slider-scroll controla quantos itens andam a cada clique/troca — por padrão é igual a show (avança página inteira). Compare os dois abaixo, ambos mostrando 3 itens:

3 em 3 (padrão — sem sw-slider-scroll)

1

2

3

4

5

1 em 1 (com sw-slider-scroll="1")

1

2

3

4

5

4. Efeito Zoom (Ken Burns) `sw-slider-effect="zoom"`

Em vez de deslizar pro lado, os slides ficam empilhados: o atual dá um leve zoom/pan enquanto some em crossfade pro próximo. Ignora sw-slider-loop (não clona itens).

Zoom 1

Zoom 2

Zoom 3

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

Trava no primeiro e no último slide — as setas somem/desabilitam a ida além das pontas em vez de voltar pro início.

Início

Meio

Fim

Referência

Atributo	Padrão	Descrição
`sw-slider-auto`	`0`	Intervalo de autoplay em ms (0 = desligado).
`sw-slider-hover`	—	`run` mantém o autoplay rodando mesmo com o mouse em cima.
`sw-slider-show`	`1`	Quantos itens visíveis por vez.
`sw-slider-scroll`	= `show`	Quantos itens avança por clique/troca de página.
`sw-slider-effect`	`slide`	`slide \| zoom` — zoom é o efeito Ken Burns, sem loop clonado.
`sw-slider-loop`	`true`	Loop infinito (clona itens nas pontas). Ignorado no efeito zoom.
`sw-slider-dur`	—	Duração customizada da transição (ex.: `600ms`).
`sw:slider:change`	—	Evento disparado ao trocar de página — `detail.page`.
`SW.Slider.next/prev/goTo(el, idx)`	—	API programática.

Slider [sw-slider]