Carousel - Y2 Docs

1. Depoimentos

"

"O Y2 transformou completamente o nosso workflow. Em semanas, entregamos um projeto que levaria meses."

AS

Ana Silva

CTO, TechStart

"

"Componentes reutilizáveis de alta qualidade. A documentação é excelente e a curva de aprendizado é mínima."

BL

Bruno Lima

Lead Dev, Agência XYZ

"

"Finalmente um framework brasileiro de qualidade! Uso em todos os meus projetos agora."

CM

Carla Mendes

Freelancer

2. Efeitos de Animação

Use y2caro-effect para escolher o efeito.

fade (classe .is-fde)

HTML

Marcação

CSS

Estilos

JS

Interatividade

slide-left (padrão)

Slide 1

Entrada da direita

Slide 2

Entrada da direita

Slide 3

Entrada da direita

slide-right

Slide 1

Entrada da esquerda

Slide 2

Entrada da esquerda

Slide 3

Entrada da esquerda

slide-up

Slide 1

Entrada de baixo

Slide 2

Entrada de baixo

Slide 3

Entrada de baixo

slide-down

Slide 1

Entrada de cima

Slide 2

Entrada de cima

Slide 3

Entrada de cima

zoom-in

Slide 1

Cresce ao entrar

Slide 2

Cresce ao entrar

Slide 3

Cresce ao entrar

zoom-out

Slide 1

Encolhe ao entrar

Slide 2

Encolhe ao entrar

Slide 3

Encolhe ao entrar

bounce

Slide 1

Elástico

Slide 2

Elástico

Slide 3

Elástico

flip

Slide 1

Rotação 3D

Slide 2

Rotação 3D

Slide 3

Rotação 3D

3. Variantes Mínimas

4. API JavaScript

const car = document.querySelector('[y2caro]');

// Navegar
Y2Caro.next(car);
Y2Caro.prev(car);
Y2Caro.goTo(car, 2); // índice base-0

// Pausar / retomar autoplay
Y2Caro.pause(car);
Y2Caro.resume(car);

// Eventos
car.addEventListener('yd:car:change', e => {
  console.log('Slide atual:', e.detail.index);
});

Quick Reference

Atributo / Classe	Elemento	Descrição
`y2caro`	div	Ativa Y2Caro no container
`y2caro-effect="nome"`	div	`slide-left`, `slide-right`, `slide-up`, `slide-down`, `fade`, `zoom-in`, `zoom-out`, `bounce`, `flip`
`.is-fde`	div	Atalho para efeito fade via classe
`y2caro-auto="ms"`	div	Autoplay com intervalo em ms
`y2caro-dur="ms"`	div	Duração da transição (padrão: 600ms)
`y2caro-loop="false"`	div	Desativa loop (padrão: true)
`.y2caro-trk`	div	Trilha de slides
`.y2caro-it`	div	Item/slide individual
`.y2caro-it [y2caro-effect]`	div	Efeito individual por item
`.y2caro-nav`	div	Container de controles (setas + dots)
`.y2caro-prv / .y2caro-nxt`	button	Botões anterior / próximo
`.y2caro-dts`	div	Container de dots (preenchido automaticamente)
`Y2Caro.next / prev / goTo`	JS	Navegação via JavaScript
`Y2Caro.pause / resume`	JS	Controle do autoplay
`yd:car:change`	evento	Disparado ao mudar slide — detail: { index }

Text Carousel Y2Caro

1. Depoimentos

2. Efeitos de Animação

3. Variantes Mínimas

4. API JavaScript

Quick Reference