Slider no SWCore — documentação e exemplos

O que é

Carrossel clássico — setas, bolinhas de navegação, arrasta no touch, autoplay pausável. O efeito "zoom" (Ken Burns) anima lentamente cada slide com zoom+deslocamento sutil.

Como funciona

No modo loop normal, clona os itens das pontas pra criar a ilusão de looping infinito sem "pulo" visual. No efeito zoom, os itens ficam empilhados (sem clonagem) e alternam opacidade com a imagem animando via CSS.

Exemplos

1. Padrão, com imagens reais e autoplay Ao vivo

<div sw-slider sw-slider-show="1" sw-slider-auto="3500" class="demo-media demo-media--tall">
  <div class="sw-slider-trk">
    <div class="sw-slider-it"><img src="../../assets/images/image-reveal/amber-chair.webp" alt="Poltrona"></div>
    <div class="sw-slider-it"><img src="../../assets/images/image-reveal/architecture.webp" alt="Arquitetura"></div>
    <div class="sw-slider-it"><img src="../../assets/images/image-reveal/chrome-desert.webp" alt="Deserto"></div>
  </div>
  <button class="sw-slider-prv">‹</button>
  <button class="sw-slider-nxt">›</button>
  <div class="sw-slider-dot-grp"></div>
  <button class="sw-slider-ply"></button>
</div>

2. sw-slider-show + sw-slider-scroll — quantos aparecem × quantos andam Ao vivo

3 em 3 (padrão — sem sw-slider-scroll): cada clique troca a página inteira.

1

2

3

4

5

1 em 1 (com sw-slider-scroll="1"): mostra 3, mas anda de 1 em 1.

1

2

3

4

5

<!-- 3 em 3 -->
<div sw-slider sw-slider-show="3">...</div>

<!-- 1 em 1, mostrando 3 -->
<div sw-slider sw-slider-show="3" sw-slider-scroll="1">...</div>

3. sw-slider-effect="zoom" — Ken Burns Ao vivo

<div sw-slider sw-slider-show="1" sw-slider-effect="zoom" sw-slider-auto="3500" class="demo-media demo-media--tall">
  <div class="sw-slider-trk">
    <div class="sw-slider-it"><img src="../../assets/images/image-reveal/fabric-chrome.webp" alt="Tecido Cromo"></div>
    <div class="sw-slider-it"><img src="../../assets/images/image-reveal/amber-chair.webp" alt="Poltrona"></div>
  </div>
  <button class="sw-slider-prv">‹</button>
  <button class="sw-slider-nxt">›</button>
  <div class="sw-slider-dot-grp"></div>
</div>

4. Sem loop — sw-slider-loop="false" Ao vivo

Trava no primeiro e no último slide — clicar em "›" no fim não volta pro início.

Início

Meio

Fim

<div sw-slider sw-slider-loop="false">...</div>

Atributos

sw-slider-show

quantos itens mostrar por vez (padrão 1)

sw-slider-scroll

quantos itens avança por clique/troca de página (padrão = show, avança página inteira)

sw-slider-loop="false"

desativa o loop infinito — trava no primeiro/último em vez de voltar ao início

sw-slider-auto

intervalo de autoplay em ms (0 = desativado)

sw-slider-effect="zoom"

ativa o efeito Ken Burns em vez do slide lateral — ignora sw-slider-loop (não clona itens)

sw-slider-hover="run"

não pausa o autoplay ao passar o mouse (padrão é pausar)

sw-slider-dur

duração customizada da transição (ex.: "600ms")

.sw-slider-prv / .sw-slider-nxt

setas de navegação manual (opcionais)

.sw-slider-dot-grp

container de pontinhos (opcional) — deixe vazio, o JS preenche sozinho

.sw-slider-ply

botão de play/pause manual (opcional) — independente do hover

Variantes

Nenhum.

Eventos

sw:slider:change

{ page }

API (JavaScript)

SW.Slider.next(el)

—

SW.Slider.prev(el)

—

SW.Slider.goTo(el, idx)

—

Requisitos

Precisa de altura definida no container (via CSS) — o slider não calcula altura automática a partir do conteúdo.

Limitações — o que ele não faz

Nenhuma.

Slider Componentes