Wtricks • Tutoriais e Dicas do Mundo Digital

Galeria de fotos simples e responsiva usando apenas CSS e JavaScript

Por Carlos Sabo Cantanzaro • 18/03 - 18:20 pm | Em CSS, JavaScript

Se você quer uma galeria de fotos responsiva, com recursos super simples e usado apenas CSS e JS, então essa galeria de fotos CSS é a ideal pra você!

Criar uma galeria de fotos (ou slideshow) responsiva, pode ser uma tarefa complicada se você não tiver nenhum conhecimento anterior sobre CSS e JavaScript.

Uma alternativa que muitos desenvolvedores acabam recorrendo é ao uso de plugins, que fazem todo o trabalho sozinho e isso não é errado, mas existem alternativas melhores! Como eu disse no tutorial de sistema de grids responsivo com CSS e no tutorial sobre menu responsivo só com CSS e JavaScript puro, eu não sou completamente a favor de usar de usar frameworks e plugins, sem que exista uma real necessidade pra isso.

Justamente por isso, adaptei o código dessa galeria de fotos, que uso em alguns projetos, para que qualquer um possa usar e incorporar essa funcionalidade de forma descomplicada e sem a necessidade de nenhum plugin externo ou Jquery para que funcione corretamente.

Para utilizar a galeria é só assistir o tutorial abaixo, ou se você já tiver um conhecimento prévio de HTML e CSS, é só copiar o código fonte e adaptar para seu projeto, tudo está bem comentado, para que todo esse processo seja simples!

Um detalhe importante: como eu disse no titulo, essa é uma galeria de fotos simples, e por conta disso, não tem alguns elementos interessantes como bullets, Thumbnails, controle por gestos e etc… Futuramente pretendo implementar esse código, mas como eu disse, por hora o objetivo é realmente ser uma galeria de fotos bem simples com CSS e JavaScript puro.

Caso você seja um usuário mais avançado, fique a vontade para modificar o código e adapta-lo para suas necessidades.

Como usar o código?

Para usar a galeria, basta copiar os códigos e colar no seu projeto, modificando o que for necessário para ficar dentro de suas necessidades. Caso tenha muita dificuldade para fazer a adaptação, basta assistir o vídeo no começo do artigo, nele explico o passo a passo para a implementação. Vale lembrar que os arquivos estão divididos em três partes, sendo elas: HTML, CSS e JavaScript puro, você precisa de todas as partes para fazer a galeria funcionar perfeitamente.

Veja a galeria em funcionamento:

See the Pen Galeria de Fotos responsiva com CSS e JS by Carlos Sabo Cantanzaro (@wtricks) on CodePen.

Caso você tenha interesse em melhorar esse código ou sugerir alguma alteração, você pode encontrar o código fonte original lá no repositório do github.

PARTICIPE DA DISCUSSÃO