Crie galeria de slides apenas com CSS puro com o Gallery CSS

Crie galeria de slides apenas com CSS puro com o Gallery CSS

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


Em 2013, no segundo ano de vida do TekZoom, foi produzido um vídeo demonstrando como utilizar o Gallery CSS para criar um slide de imagens apenas com CSS e HTML.

Com a migração do site do WordPress para o Ghost no início deste ano alguns artigos e links foram perdidos ou até mesmo excluídos de propósito, para deixar o conteúdo mais atual.

Com isso o post original ficou sem seus links, mas agora este problema esta sendo corrigido e o melhor, com tudo novo e mais completo.

Gallery CSS - Slide com CSS Puro

Gallery-CSS

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:

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 :)

Hospedagem Profissional por $5 na Digital Ocean e GANHE $10 em créditos na hora!

A Digital Ocean é uma empresa mundialmente reconhecida pela qualidade de seus serviços e possui servidores privados de alta performance e qualidade profissional por valores extremamente baixos se comparados ao seus principais concorrentes, como a Amazon.

Criando sua conta na DO através deste link você ganha na hora $10 para testar os serviços da empresa e também conseguir fazer tudo que mostramos em nossos vídeos em tempo real e sem gastar nada.

As VPS da DO são recomendadas ainda para a hospedagem de Sites de Conteúdo, Blogs, Aplicações Web e Redes Sociais, pois é possível configurar os servidores com todos os recursos que você ou seu projeto necessitam. É uma verdadeira maravilha!

Clique aqui e ganhe na hora $10 para poder testar melhor a VPS e os serviços da Digital Ocean. Aproveite!

Autor

Reinaldo Silotto

Community Manager GDG-Bauru, integrante do programa Intel Innovators e ganhador de 3 prêmios iBest com o site Emulando. Mantenedor e Founder do TekZoom. Community Manager no iMasters.

Brasil - São Paulo https://tekzoom.com.br Reinaldo Silotto Reinaldo Silotto

Mais conteúdos para você

Comentários