Slide com CSS puro simples, fácil e rápido | iMasters
O Gallery CSS é uma solução simples e de código aberto para criação de galeria de imagens, com controle de visualização e autoplay, que gostei tanto que resolvi compartilhar.
Claro que desenvolver algo como esse Slide não nenhum bicho de sete cabeças, mas é sempre muito bom poder divulgar o trabalho de outros desenvolvedores que se propõem a compartilhar um pouco do seu conhecimento.
Abaixo você confere um vídeo que gravei demonstrando como utilizar este slide puro em CSS e também o código que utilizei no exemplo.
Gallery CSS – Slide com CSS Puro
A criação do Slide é muito simples, e bastam apenas algumas poucas linhas de código para tudo ficar pronto. A primeira coisa a fazer é baixar os arquivos CSS do repositório oficial do Gallery CSS:
https://github.com/benschwarz/gallery-css
Agora é necessário montar um HTML básico, como demonstrado no vídeo. No HEAD, é importante fazer as chamadas para os dois arquivos CSS:
<link rel="stylesheet" href="css/gallery.theme.css">
<link rel="stylesheet" href="css/gallery.min.css">
E agora é só digitar dentro do BODY, o código HTML do slide:
<div class="gallery autoplay items-3">
<h1><img src="imagens/img-1.jpg"></h1>
<h1><img src="imagens/img-2.jpg"></h1>
<h1><img src="imagens/img-3.jpg"></h1>
Lembrando que a classe AUTOPLAY deve ser utilizada apenas para transições automatizadas, sem ação executada pelo usuário.