Desenvolver interfaces limpas e responsivas é sempre um desafio. Muitas vezes, ao precisar de um simples carrossel de imagens (slider), acabamos importando bibliotecas gigantescas e dependências pesadas, como jQuery, que incham nosso projeto desnecessariamente.
Foi pensando nisso que desenvolvi o Engaslider: um plugin de slider de imagens focado em simplicidade, construído 100% com JavaScript puro (Vanilla JS) e CSS puro. Sem frameworks pesados, sem dores de cabeça.
O que o Engaslider oferece?
O Engaslider foi desenhado para ser direto ao ponto. Ele entrega o que a maioria dos projetos precisa de forma extremamente leve:
- Transições Suaves (Fade): Animações criadas diretamente via
@keyframesdo CSS, garantindo performance pelo navegador. - Múltiplas Formas de Navegação: Suporte a setas (próximo/anterior), navegação por "dots" (bolinhas circulares) e uma barra lateral/inferior de miniaturas (thumbnails).
- Autoplay Configurável: Basta passar a opção correta e o seu slider começa a rodar sozinho.
- Zero Dependências: Instale e use, simples assim.
A Evolução: Refatoração Recente e Boas Práticas
Recentemente, o projeto passou por uma importante análise e refatoração de código (v0.2) para se adequar aos mais rígidos padrões da web moderna (W3C).
O que mudou por debaixo dos panos?
- Semântica HTML: Antigamente o script dependia de atributos
idque se repetiam nas imagens (id="slider-image"). Isso foi totalmente limpo! Agora o motor de renderização busca de forma inteligente pelas classes, deixando o HTML 100% válido. - Limpeza no JavaScript: Reatribuições desnecessárias e variáveis soltas foram limpas, melhorando a velocidade de execução do script (
slidershow.js).
O Futuro do Projeto: Rumo à Arquitetura Modular
O Engaslider está crescendo e os próximos passos já estão desenhados. A meta é tornar a biblioteca escalável o suficiente para competir com as grandes do mercado em termos de arquitetura. O plano (roadmap) inclui:
- Refatoração para POO (Orientação a Objetos): Vamos encapsular toda a lógica em uma Classe ES6. Isso permitirá que os desenvolvedores tenham quantos sliders quiserem na mesma página, sem que um interfira no outro.
- Customização via Variáveis CSS: Todo o estilo (cores, tamanhos, botões) será passado para Custom Properties (
:root), permitindo que as equipes de design customizem o Engaslider mexendo em apenas 3 linhas de CSS! - Sistema de Gestos (Swipe): Implementação de arraste para dispositivos mobile.
Teste você mesmo!
Se você está criando um site e não quer carregar bibliotecas enormes apenas para exibir algumas fotos, o Engaslider é para você.
O projeto é de código aberto e todos são bem-vindos para contribuir, sugerir melhorias ou utilizá-lo livremente!
👉 Acesse o repositório no Github e veja o código fonte
👉 Veja os Exemplos Rodando Online
Até a próxima, e bons códigos!
