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">

            <div id="item-1" class="control-operator"></div>
            <div id="item-2" class="control-operator"></div>
            <div id="item-3" class="control-operator"></div>

            <figure class="item">
                <h1><img src="imagens/img-1.jpg"></h1>
            </figure>

            <figure class="item">
                    <h1><img src="imagens/img-2.jpg"></h1>
            </figure>

            <figure class="item">
                <h1><img src="imagens/img-3.jpg"></h1>
            </figure>

            <div class="controls">
                <a href="#item-1" class="control-button">.</a>
                <a href="#item-2" class="control-button">.</a>
                <a href="#item-3" class="control-button">.</a>
            </div>

        </div>

Lembrando que a classe AUTOPLAY deve ser utilizada apenas para transições automatizadas, sem ação executada pelo usuário.

Caso encontre algum problema é só deixar nos comentários.