JS Component
Slider Y2Slider
Carousel de imagens e conteúdo - swipe touch, teclado, autoplay, dots, múltipos itens visíveis, loop.
1. Básico com Dots e Setas
2. Autoplay
3. Múltipos Itens Visíveis
4. Efeitos e Transições - Zoom
A imagem cresce lentamente (Ken Burns) e faz fade para a
próxima. Use y2slider-effect="zoom" e defina uma altura fixa no container.
5. API JavaScript
const sld = document.querySelector('[y2slider]');
// Evento ao trocar de slide
sld.addEventListener('yd:slider:change', e => {
console.log('Página atual:', e.detail.page);
});
Quick Reference
| Atributo / Classe | Elemento | Descrição |
|---|---|---|
y2slider |
div | Ativa o slider no container |
y2slider-auto="3000" |
div | Autoplay a cada N ms - pausa no hover |
y2slider-show="3" |
div | Mostra N itens por vez |
y2slider-scroll="1" |
div | Avança N itens por clique (padrão: igual ao show) |
y2slider-loop="false" |
div | Desativa o loop (padrão: true) |
y2slider-dur="0.6s" |
div | Duração da transição (padrão: 0.4s) - aceita s ou ms |
y2slider-effect="zoom" |
div | Efeito zoom + fade (Ken Burns) - requer altura fixa |
.y2slider-trk |
div | Track - container dos slides |
.y2slider-it |
div | Item individual do slider |
.y2slider-prv / .y2slider-nxt |
button | Botões anterior / próximo |
.y2slider-dot-grp |
div | Container dos dots (gerado automaticamente) |
.y2slider-cap / .y2slider-cap-ttl |
div / span | Legenda sobre a imagem |
.y2slider-ply |
button | Botão play/pause do autoplay |
yd:slider:change |
evento | Disparado ao trocar slide - detail: { page } |