Carrossel de conteúdo (texto, cards, depoimentos) com 9 efeitos de transição diferentes.
Parecido com o Slider, mas pensado pra conteúdo não-visual (depoimentos, cards) e com mais opções de efeito de troca (fade, slides direcionais, zoom, bounce, flip).
Cada efeito é um par de transformações CSS (entrada/saída) aplicadas via transform inline no JS — não precisa de CSS extra por efeito. Arraste/swipe (mouse ou touch) sempre fica ativo, independente dos controles visuais escolhidos.
"O SWCore deixou nosso frontend muito mais rápido de montar."
"Zero dependências, zero dor de cabeça."
"A documentação viva ajudou demais no onboarding."
<div sw-carousel sw-carousel-auto="4000">
<div class="sw-carousel-trk">
<div><!-- Item 1: qualquer HTML --></div>
<div><!-- Item 2 --></div>
</div>
<button class="sw-carousel-prv">‹</button>
<button class="sw-carousel-nxt">›</button>
<div class="sw-carousel-dts"></div>
</div>Cada card gira sozinho — repare como o mesmo texto entra de um jeito diferente em cada um.
slide-left (padrão)
slide-right
slide-up
slide-down
zoom-in
zoom-out
bounce
flip
fade
Só .sw-carousel-trk é indispensável. Sem controles, ainda dá pra navegar via swipe/arraste ou API.
<!-- Sem dots nem setas — só swipe/autoplay -->
<div sw-carousel sw-carousel-auto="3000">
<div class="sw-carousel-trk">...</div>
</div>
<!-- Apenas dots -->
<div sw-carousel>
<div class="sw-carousel-trk">...</div>
<div class="sw-carousel-dts"></div>
</div>Trava no primeiro e no último item — clicar em "›" 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.
<div sw-carousel sw-carousel-loop="false">...</div>const car = document.querySelector('[sw-carousel]');
// Navegação
SW.Carousel.next(car);
SW.Carousel.prev(car);
SW.Carousel.goTo(car, 2); // vai direto pro índice 2
// Play/pause do autoplay
SW.Carousel.pause(car);
SW.Carousel.resume(car);
// Evento
car.addEventListener('sw:carousel:change', (e) => {
console.log('slide atual:', e.detail.index);
});.sw-carousel-trksw-carousel-effectsw-carousel-dursw-carousel-autosw-carousel-loop="false".sw-carousel-dts.sw-carousel-prv / .sw-carousel-nxtNenhum.
sw:carousel:changeSW.Carousel.next/prev/goTo/pause/resume(el, idx?)Nenhuma.
Nenhuma.
