Guia CSS

Como criar um slider com CSS e HTML

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (14)  (0)

Aprenda como criar sliders utilizando apenas CSS3 e HTML5.

Motivação

O slider é um elemento visual muito comum em aplicações web, principalmente àquelas que exibem muitas imagens, possibilitando uma melhor experiência ao usuário. Entretanto, a utilização massiva de JavaScript pode prejudicar o desempenho do website, especialmente em dispositivos móveis. Assim, sempre que possível, uma ótima opção é aproveitar os recursos do CSS3 para a criação de elementos visuais sem a necessidade de JavaScript.

Passo 1: Montar o HTML

Antes de começarmos a montar o nosso slider, é interessante conheceremos exatamente o que é, conforme apresentado na Figura 1. Note que trata-se de algo que tende a melhorar a experiência do usuário dentro do website, ao possibilitar a exibição de diferentes informações, através de imagens, no mesmo local, e com recursos simples de animação.

Exemplo de slider
Figura 1. Exemplo de slider

O passo mais simples na criação de um slider é o HTML. Aqui, criaremos um slider com apenas três imagens, mas a implementação realizada é a mesma independentemente dessa quantidade: basta replicar os passos para todas elas.

A proposta inicial do HTML traz uma lista não-ordenada (<ul>, do inglês unordered list) com vários elementos (<li>, list item) contendo nossas imagens. Esse HTML, apresentado na Listagem 1, será melhorado quando precisarmos definir a navegação entre as imagens no slider.

  01 <ul class="slider">
  02     <li>
  03           <img src="images/1.jpg" />
  04     </li>
  05     <li>
  06           <img src="images/2.jpg" />
  07     </li>
  08     <li>
  09           <img src="images/3.jpg" />
  10     </li>
  11 </ul>
  
Listagem 1. HTML básico para o slider

Linha 01: Define nossa lista não-ordenada de imagens. Observe que a mesma possui a classe slider, que será utilizada para adicionar estilos posteriormente;

Linhas 02 a 04, 05 a 07 e 08 a 10: Itens da lista contendo as imagens 1, 2 e 3, respectivamente. Note que utilizamos o caminho relativo do diretório “images” para todas elas;

Linha 11: Fechamento da lista não-ordenada de imagens.

Passo 2: Definir os estilos

Com nosso HTML inicial pronto, podemos começar a definir os estilos que serão aplicados ao slider. Para garantirmos um design responsivo, o primeiro passo é assegurar o reset dos elementos através do CSS. Isso é feito de forma bastante simples, através da seguinte linha de estilos:

  * { margin: 0; padding: 0; }
  

Note que simplesmente zeramos a margem e a margem interna (padding) de todos os elementos do DOM. Isso faz com que o comportamento seja o mesmo em qualquer navegador, algo essencial para a responsividade.

O próximo passo é adicionar os estilos básicos para nosso slider, o que pode ser visto na Listagem 2. É válido ressaltar que esses estilos são relativamente simples e ainda não definem a forma como o slider irá se comportar. Isso será realizado posteriormente.

  01 .slider {
  02     display: block;
  03     height: 293px;
  04     width: 600px;
  05     margin: auto;
  06     margin-top: 20px;
  07     position: relative;
  08 }
  09
  10 .slider li {
  11     list-style: none;
  12     position: absolute;
  13 }
  14 
  15 .slider img {
  16     margin: auto;
  17     height: 100%;
  18     width: 100%;
  19     vertical-align: top;
  20 } 
  
Listagem 2. CSS básico para o slider

Linhas 01 a 08: Definição da classe slider, a classe base para o estilo do elemento que estamos criando. Aqui, especificamos os principais parâmetros que serão necessários para o visual do elemento. A altura (height) e a largura (width) estão setadas com esses valores (293 e 600px, respectivamente) devido ao tamanho das imagens, mas poderiam ser outros valores. Note, ainda, que temos uma margem em relação ao topo (margin-top), para garantir um melhor visual do slider com relação à página;

Linhas 10 a 13: Definição do elemento li filho da classe slider. Essa técnica de CSS indica que todo elemento li que está presente dentro de outro elemento com a classe slider receberá esse estilo. Como podemos notar pela Listagem 1, esse é nosso caso. Assim, o estilo será aplicado a todos os itens da lista. O estilo em si é muito simples: evita-se o estilo padrão (list-style: none;) e garante-se um posicionamento absoluto, ou seja, com relação à página;

Linhas 15 a 20: Definição do elemento img filho da classe slider. A técnica é equivalente ao que vimos na linha 10. Nesse caso, definimos o estilo para as imagens. A propriedade “margin: auto;” serve para centralizar o elemento. A largura e a altura em 100% sinalizam para a imagem tomar toda a largura do container: no caso, 600 e 293px, respectivamente (valores da classe slider). Por fim, “vertical-align: top;” indica que a imagem ficará alinhada verticalmente com relação ao seu topo.

Passo 3: Preparar os elementos de navegação entre os slides

A navegação entre os slides é o passo mais interessante na criação do slider. Para isso, fazemos uso de uma técnica chamada de checkbox hack, ou hack do checkbox. Essa técnica, do CSS3, é utilizada para, a partir de um label conectado a um checkbox, controlar um terceiro elemento. É importante, no entanto, que os três estejam adjacentes, para simplificar o CSS para controle desses elementos.

Dessa forma, para fazer com que esse “hack” funcione, precisaremos alterar nosso HTML, que ficará como mostrado na Listagem 3. Repare que mantemos a base da Listagem 1 e simplesmente adicionamos os elementos necessários (um input do tipo radio e um label) para que a navegação funcione.

  01 <ul class="slider">
  02     <li>
  03           <input type="radio" id="slide1" name="slide" checked>
  04           <label for="slide1"></label>
  05           <img src="images/1.jpg" />
  06     </li>
  07     <li>
  08           <input type="radio" id="slide2" name="slide">
  09           <label for="slide2"></label>
  10           <img src="images/2.jpg" />
  11     </li>
  12     <li>
  13           <input type="radio" id="slide3" name="slide">
  14           <label for="slide3"></label>
  15           <img src="images/3.jpg" />
  16     </li>
  17 </ul>
  
Listagem 3. HTML completo para o slider

Linhas 03 e 04, 08 e 09 e 13 e 14: Definição do hack para os slides. Para que essa técnica funcione, é essencial que o label possua o atributo “for” definido com o mesmo “id” do botão de rádio. É essa conexão que fará com que as ações do usuário em cima do label de fato selecionem o botão.

Agora que temos nosso HTML pronto, precisamos definir o CSS que fará com que isso funcione de fato. O primeiro ponto é esconder todos os “inputs”, fazendo com que somente o label apareça. Como veremos, isso é muito simples, e pode ser feito com um código como o apresentado abaixo, em que simplesmente setamos a propriedade display para none, ou seja, nenhuma amostragem visual do elemento.

  .slider input {
      display: none;
  }
  

Na sequência, fazemos a definição do estilo que nossos labels terão: como botões na cor preta e no canto inferior esquerdo das imagens. Isso é definido de forma relativamente simples, como podemos observar na Listagem 4. Como podemos notar, fizemos uso de alguns itens bem interessantes do CSS, como o nth_child(n), para buscar o primeiro, segundo e terceiro filhos de uma determinada classe ou elemento.

  01 .slider label {
  02     background-color: #000;
  03     bottom: 10px;
  04     cursor: pointer;
  05     display: block;
  06     height: 10px;
  07     position: absolute;
  08     width: 10px;
  09     z-index: 10;
  10 }
  11
  12 .slider li:nth-child(1) label {
  13     left: 10px;
  14 }
  15
  16 .slider li:nth-child(2) label {
  17     left: 40px;
  18 }
  19
  20 .slider li:nth-child(3) label {
  21     left: 70px;
  22 } 
  
Listagem 4. CSS para definição do visual dos elementos de navegação do slider

Linha 01: Definição do estilo do label filho da classe slider.

Linhas 02 a 09: Algumas definições visuais. Primeiramente, a cor de fundo (preto, em background-color). Como temos um posicionamento absoluto (position: absolute), a linha 03 traz a definição da distância com relação à base: 10 pixels. Na linha 04, há a definição do cursor para esses elementos. Para mostrar para o usuário que são clicáveis, o valor é o pointer (a mão que aparece em links, por exemplo). No mais, temos outras definições simples de altura (height) e largura (width), e visualização (display). Além disso, a linha 09 traz a definição do z-index, que garante que os labels serão mostrados sobre as imagens em qualquer circunstância;

Linhas 12 a 14, 16 a 18 e 20 a 22: aqui, utiliza-se o método nth_child(n) para definir o posicionamento de cada um dos labels, do contrário, eles seriam posicionados um sobre o outro. Assim, primeiramente buscamos o primeiro filho do tipo label de li (nth_child(1)) e definimos o posicionamento 10px à esquerda, com a propriedade left. O mesmo é feito para o segundo (nth_child(2), 40 pixels) e terceiro (nth_child(3), 70 pixels) filhos.

Com isso, temos o visual final do slider como o mostrado na Figura 2. Note, como definido anteriormente, que os labels estão posicionados no canto inferior esquerdo da imagem, e o slider, centralizado. Esse slider, no entanto, ainda não tem nenhum comportamento atrelado.

Visual final do slider
Figura 2. Visual final do slider

Passo 4: Navegar entre os slides

Os elementos de navegação estão prontos. Agora, basta completarmos o checkbox hack para viabilizar a navegação. Para isso, a ideia é relativamente simples: escondemos as imagens, todas elas, e garantimos que somente uma será mostrada por vez. Utilizaremos, portanto, o input do tipo radio que definimos anteriormente: se está definido como checked, mostra a imagem; caso contrário, não. Assim, temos nosso slider pronto.

Esse comportamento pode ser implementado através de CSS, como demonstra a Listagem 5. Na linha 06, é importante destacarmos o "~". O CSS3 possui esse seletor para permitir que lidemos com os relacionamentos entre os elementos. Esse se refere a qualquer elemento irmão (no mesmo nível de hierarquia, filho do mesmo pai). Nesse código, temos que o elemento img, irmão do input marcado como checked, terá as características definidas nas linhas 07, 08 e 09.

  01 .slider img {
  02     opacity: 0;
  03     visibility: hidden;
  04 }
  05
  06 .slider li input:checked ~ img {
  07     opacity: 1;
  08     visibility: visible;
  09     z-index: 10;
  10 } 
  
Listagem 5. CSS para garantir o comportamento de navegação entre as imagens do slider

Linhas 01 a 04: Esconde as imagens filhas do slider. Repare que isso é feito para todas as imagens. A exibição de apenas uma delas ocorrerá posteriormente;

Linha 06: Definição da propriedade de navegação. Dessa forma, os estilos aqui especificados serão aplicados somente para a imagem referente ao input que está marcado como checked;

Linhas 07 e 08: Fazem com que a imagem esteja visível, ao resetar os valores de opacity e visibility da mesma;

Linha 09: Índice da imagem com relação ao eixo z. Note que o valor é o mesmo que vimos para o label, o que poderia gerar algum problema visual, fazendo com que o label fosse escondido pela imagem. Nesse caso, porém, não há problema, uma vez que, no HTML, o elemento <label> está posicionado acima do elemento <img>. Dessa forma, o mesmo tem prioridade.

Com isso, concluímos a implementação do nosso slider utilizando somente HTML e CSS. Note que não escrevemos uma linha de código JavaScript, o que faz com que ele seja mais simples e portável, especialmente em dispositivos móveis. Além disso, o CSS é extremamente poderoso, e podemos utilizá-lo de forma a criar transições, por exemplo, para fazer com que a navegação seja mais sutil e visualmente mais interessante.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Ficou com alguma dúvida?