Conheça o Gallery.css e crie slideshows com CSS puro

Galerinha, hoje venho falar sobre um framework que permitirá que você crie slideshows com CSS puro, isso mesmo, sem o uso de JavaScript.

Ele além de ser leve (4.5 kb sem prefix e 10 kb prefixado) é bastante simples de usar e assim como qualquer outro framework CSS tudo o que você precisa fazer é adicionar as classes.

Vamos a um simples tutorial de como usa-lo.

Training Center Slideshow

Baixando o gallery.min.css

Primeiro você deve baixar o gallery.min.css e o arquivo gallery.prefixed.min.css, para isso acesse o repositório no github onde se encontra o arquivo que queremos, se você quiser pode optar por baixar um tema extra também ou a versão “desminificada”.

Para obter o código CSS clique em gallery.min.css e vá em RAW, copie todo o código CSS e salve em um arquivo com o nome de gallery.min.css, em seguida faça o mesmo para o gallery.prefixed.min.css.

Adicionando na página e criando um slider

Feito isso vamos para o que interessa que é o slide, crie um arquivo chamado index.html e dentro dele em <head> adicione as seguintes linhas:

<link rel="stylesheet" href="gallery.theme.css">
<link rel="stylesheet" href="gallery.min.css">

Lembrando que se você já possuí experiência na área, sinta-se livre para pular as etapas acima ou baixar via Bower usando o comando:

bower install gallery-css

E por fim, para criarmos nosso slideshow, acrescente o seguinte:

<div class="gallery 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>1</h1>
</figure>

<figure class="item">
<h1>2</h1>
</figure>

<figure class="item">
<h1>3</h1>
</figure>
/*Quanto mais imagens no seu slide mais botões devem ser acrescentados*/
  <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>

Também é possível criar slideshos automáticos para isso acrescente a classe autoplay:

<div class="gallery autoplay items-3">

Bem, é isso espero que tenham gostado e até a próxima. Se você quiser pode conferir um demo.


Se você ainda não conhece o Training Center, de uma olhada nesse artigo.

Se curtiu essa dica, da um like aqui no Medium e compartilhe esse post nas redes sociais.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.