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.
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.
<ul class="slider"> <li> <img src="images/1.jpg" /> </li> <li> <img src="images/2.jpg" /> </li> <li> <img src="images/3.jpg" /> </li> </ul>
Linha 01: Define nossa lista não ...
