🖼️ Slideshow/Carrossel - Vanilla JavaScript

Um slideshow/carrossel de imagens completo e interativo, desenvolvido em JavaScript puro (vanilla), sem dependências externas. Ideal para praticar conceitos como timers, eventos, classes ES6 e animações CSS.

✨ Funcionalidades

• ✅ Navegação intuitiva - Botões next/prev para navegar entre slides
• ✅ Autoplay pausável - Transição automática que pausa ao passar o mouse
• ✅ Indicadores (dots) - Navegação direta para qualquer slide
• ✅ Touch/Swipe - Suporte completo para gestos em dispositivos móveis
• ✅ Navegação por teclado - Setas, Home, End e Espaço
• ✅ Persistência - Salva posição atual no localStorage
• ✅ Loop infinito - Navegação circular sem fim
• ✅ Responsivo - Adapta-se a qualquer tamanho de tela
• ✅ Acessível - Suporte a leitores de tela e navegação por teclado
• ✅ Performance otimizada - Usa transform CSS para animações suaves

📁 Estrutura do Projeto

Slideshow/
├── index.html      # Estrutura HTML do carrossel
├── style.css       # Estilos CSS responsivos
├── slideshow.js    # Classe ES6 principal
└── README.md       # Documentação

🚀 Como Usar

Instalação Básica

1. Clone ou baixe este projeto
2. Abra o arquivo index.html em seu navegador
3. Pronto! O slideshow já está funcionando

Integração em Seu Projeto

1. HTML

Copie a estrutura HTML para seu projeto:

<div class="carousel-container" data-slide="0">
    <div class="carousel-track">
        <img class="slide" src="img1.jpg" alt="Descrição 1">
        <img class="slide" src="img2.jpg" alt="Descrição 2">
        <img class="slide" src="img3.jpg" alt="Descrição 3">
    </div>
    
    <button class="nav-btn prev" aria-label="Slide anterior">‹</button>
    <button class="nav-btn next" aria-label="Próximo slide">›</button>
    
    <div class="dots">
        <span class="dot active" data-index="0"></span>
        <span class="dot" data-index="1"></span>
        <span class="dot" data-index="2"></span>
    </div>
</div>

2. CSS

Inclua o arquivo style.css ou copie os estilos necessários:

<link rel="stylesheet" href="style.css">

3. JavaScript

Inclua o arquivo slideshow.js e inicialize:

<script src="slideshow.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        new Slideshow('.carousel-container');
    });
</script>

⚙️ Configuração

Opções do Construtor

const slideshow = new Slideshow('.carousel-container', {
    autoplayInterval: 3000,      // Intervalo em ms (padrão: 3000)
    touchThreshold: 50,          // Distância mínima para swipe (padrão: 50)
    enableLocalStorage: true,    // Salvar posição (padrão: true)
    enableKeyboard: true,        // Navegação por teclado (padrão: true)
    enableTouch: true            // Suporte a touch (padrão: true)
});

Exemplos de Configuração

// Slideshow mais rápido
const fastSlideshow = new Slideshow('.carousel-container', {
    autoplayInterval: 1500
});

// Sem autoplay
const manualSlideshow = new Slideshow('.carousel-container', {
    autoplayInterval: 0
});

// Apenas navegação manual
const manualOnly = new Slideshow('.carousel-container', {
    autoplayInterval: 0,
    enableKeyboard: false,
    enableTouch: false
});

🎮 Controles

Controle	Ação
🖱️ Clique em ‹	Slide anterior
🖱️ Clique em ›	Próximo slide
⏯️ Hover no container	Pausa autoplay
👆 Swipe esquerda	Próximo slide
👆 Swipe direita	Slide anterior
⌨️ Seta ←	Slide anterior
⌨️ Seta →	Próximo slide
⌨️ Home	Primeiro slide
⌨️ End	Último slide
⌨️ Espaço	Play/Pause
⚫ Clique no dot	Vai para o slide

📱 Slides Dinâmicos

Você pode criar slides dinamicamente usando a função utilitária:

const images = [
    { url: 'https://example.com/img1.jpg', alt: 'Imagem 1' },
    { url: 'https://example.com/img2.jpg', alt: 'Imagem 2' },
    { url: 'https://example.com/img3.jpg', alt: 'Imagem 3' }
];

const slideshow = createDynamicSlideshow('.carousel-container', images);

🔧 API da Classe

Métodos

// Navegação
slideshow.next();              // Próximo slide
slideshow.prev();              // Slide anterior
slideshow.goTo(index);         // Vai para slide específico

// Controle de autoplay
slideshow.play();              // Inicia autoplay
slideshow.pause();             // Pausa autoplay
slideshow.togglePlayPause();   // Alterna play/pause

// Informações
slideshow.getInfo();           // Retorna objeto com informações
// { totalSlides: 7, currentIndex: 2, isPlaying: true, autoplayInterval: 3000 }

// Destruição
slideshow.destroy();           // Remove slideshow e listeners

🎨 Personalização

Alterar Velocidade da Transição

No style.css:

.carousel-track {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

Alterar Tamanho do Carrossel

.carousel-container {
    max-width: 1000px;  /* Altere conforme necessário */
    height: 500px;      /* Altere conforme necessário */
}

Alterar Cores

.nav-btn {
    background: rgba(255, 0, 0, 0.5);  /* Vermelho */
    color: white;
}

.dot.active {
    background: #ff0000;  /* Vermelho */
}

📐 Responsividade

O slideshow é totalmente responsivo e se adapta automaticamente:

• Desktop: 800px × 400px
• Tablet: 300px de altura
• Mobile: 220px de altura

Pontos de quebra em style.css:

@media (max-width: 768px) { /* Tablet */ }
@media (max-width: 480px) { /* Mobile */ }

♿ Acessibilidade

• Atributos aria-label nos botões
• Navegação completa por teclado
• Suporte a leitores de tela
• Indicadores visuais claros
• Estados de foco visíveis

🧪 Testes

Checklist de Testes

Aspecto	Teste	Status
Navegação	Next/prev volta ao início	✅
Loop infinito	% this.slides.length	✅
Autoplay	Pausa em hover, retoma	✅
Touch	Swipe funciona em mobile	✅
Teclado	Setas navegam corretamente	✅
LocalStorage	Posição salva/restaurada	✅
Responsivo	Resize funciona	✅
Performance	20+ slides sem lag	✅

Como Testar

1. Navegação: Clique nos botões e dots
2. Autoplay: Passe o mouse sobre o container
3. Touch: Use em dispositivo móvel ou emulador
4. Teclado: Use setas, Home, End e Espaço
5. Persistência: Recarregue a página e verifique a posição
6. Responsivo: Redimensione a janela do navegador

🌐 Compatibilidade

Navegador	Versão Mínima
Chrome	61+
Firefox	60+
Safari	11+
Edge	79+
Opera	48+

📚 Conceitos Aprendidos

Este projeto é excelente para praticar:

• ✨ Classes ES6 - Orientação a objetos em JavaScript
• ⏱️ Timers - setInterval e clearInterval
• 🎯 Event Listeners - Click, hover, touch, keyboard
• 🎨 CSS Transitions - Animações suaves com transform
• 💾 LocalStorage - Persistência de dados no navegador
• 📱 Touch Events - Gestos em dispositivos móveis
• ♿ Acessibilidade - ARIA e navegação por teclado
• 📐 Responsividade - Media queries e design adaptativo
• 🚀 Performance - Otimização de animações

🔗 Recursos e Referências

• LogRocket - Build Image Carousel from Scratch
• Tuts+ - Simple Carousel with Vanilla JavaScript
• Andrew McCall - Vanilla JavaScript Carousel
• GeeksforGeeks - Autoplay Carousel

📝 Licença

Este projeto está sob a licença MIT. Sinta-se livre para usar, modificar e distribuir conforme necessário.

🤝 Contribuindo

Contribuições são bem-vindas! Sinta-se à vontade para:

1. Fazer fork do projeto
2. Criar uma branch para sua feature (git checkout -b feature/AmazingFeature)
3. Commit suas mudanças (git commit -m 'Add some AmazingFeature')
4. Push para a branch (git push origin feature/AmazingFeature)
5. Abrir um Pull Request

📧 Contato

Para dúvidas ou sugestões, abra uma issue no repositório.

---

Desenvolvido com ❤️ usando Vanilla JavaScript