Artigos HTML e CSS Criando slideshow do zero com jQuery sem usar Plugins
Resultado final do slide

Figura 1: Resultado final do slide

A criação de websites vem mudando ultimamente. Nos anos 90 era raridade ver algum site organizado e totalmente padronizado. Hoje temos desde os OnePage (site em apenas uma página) até os mais imensos portais. E não é surpresa que o conhecimento front end também evoluiu, antigamente era raridade se ver um site cujo efeito parallax era aplicada corretamente. Animações como: slideshow, menu carrossel, acordeon, galerias e etc... são fichinhas.

Temos também vários plugins disponíveis para nos auxiliar nestas animações, mas infelizmente devido à má implementação dos mesmos ou por serem mal desenvolvidos, deixam nosso site pesado.

Hoje veremos como criar um elegante slideshow sem o auxílio de plug-ins.

A estrutura html5

Como foi dito início do post, nosso slide rodará em todos os browsers (navegadores). Por isso para que a estrutura html5 seja interpretada pelo IE8 acrescentamos a linha de script, nas limitações da tag "<head>".

Listagem 1: Script html5 para IE do 8 ao 6

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Logo, façamos sua seguinte estrutura html5. Note que temos a tag figure, com várias tags "<img>" como "filhas". Não se esqueça do atributo "alt", pois ele servirá como legenda das imagens.

Listagem 2: Marcação html5

<body>
	<figure id="slide">
		<imgsrc="img/01.jpg" alt="Imagem das Ilhas">
		<imgsrc="img/02.jpg" alt="Teste de Imagem">
		<imgsrc="img/03.jpg" alt="Teste de Imagem">
	</figure>

	<scripttype="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<scripttype="text/javascript">
		//aqui vem o codigoinline, pois trata-se de um exercicio de demonstração
	</script>
</body>

Sua marcação css é simples, basta colocar uma altura e largura no slide (figure) e colocar com um "overflow:hidden". E nas suas imagens colocamos com posição absoluta e com um "display:none".

Listagem 3: Estilo do slideshow

* { margin:0; padding:0;}
	#slide { 
width: 650px; 
overflow: hidden; 
height: 300px;
margin: 50px auto;
box-shadow: 0 0 8px #000;
position: relative;
}
	#slide img {
position: absolute;
z-index: 1;
display: none;
left: 0;
}
	#slide p {
z-index:2;
position: absolute; 
bottom: 0;
left: 0;
width: 100%;
padding: 10px; 
font-family: Arial; 
font-size: 14px; 
background: rgba(0,0,0,0.5);  
color: #fff;
}

Note que temos uma estilização no parágrafo (#slide p), isso acontece por que no nosso script jQuery, iremos colocar as legendas do slide em um parágrafo dinamicamente

Agora vamos ao nosso script jQuery, analisaremos linha por linha para se obter um melhor aprendizado.

Primeiro iremos deixar a primeira imagem (a primeira tag <img>) visível ao usuário e logo em seguida colocaremos uma classe "ativo" nela, que servirá para sabermos qual é a imagem ativa.

Listagem 4: Exibição da primeira imagem

$(document).ready(function(){
	$("#slide img:eq(0)").addClass("ativo").show();
})

Logo em seguida iremos capturar sua legenda, que pertence ao atributo alt. Depois disto iremos adicionar um parágrafo na tag <figure> sendo ele o primeiro elemento filho da mesma.

Listagem 5: Criando a legenda da imagem

var texto = $(".ativo").attr("alt");
$("#slide").prepend("<p>"+texto+"</p>");

Ao invés de colocar a legenda da imagem dentro do atributo alt, poderíamos colocar a sua legenda dentro de um "data-description" para que a legenda não influencie nos mecanismo de busca (SEO).

Feito isto, ao carregar a página, teremos um resultado mais ou menos assim:

Estado inicial do slideshow

Figura 2: Estado inicial do slideshow

Agora vamos ao nosso temporizador, ele será responsável por ativar as transições das imagens. Iremos definir um tempo de três segundos.

Listagem 6: Criação do temporizador

setInterval(slide,3000);

Note que foi colocado dentro do temporizador o nome "slide", ele será o nome da nossa função que irá gerar as transições e mudanças de legendas do slide.

Logo em seguida criaremos a nossa função slide, que fará toda a manipulação de nosso slide.

Listagem 7: Criação da função slide

function slide(){
	//aqui vai o código do nosso slide
	}

Dentro dela, logo de início, veremos se depois da imagem ativa (a imagem que contém a classe ativo) existe mais imagens.

Listagem 8: Verificando se já existe alguma imagem depois da imagem ativa

if($(".ativo").next().size()){
	//se houver, irá fazer algo
	}else {
		//se não, irá retornar ao estado inicial do slide
}

Se houver imagens, depois da imagem ativa, iremos fazer o seguinte:

  1. Escondemos a imagem ativa num efeito de fade.
  2. Tiramos a classe "ativo", ou seja, a imagem não está mais ativa.
  3. Vamos capturar a tag que vem depois da imagem que acabamos de remover a classe ativo, ou seja, a próxima imagem.
  4. Vamos faze-la aparecer com efeito de fade.
  5. Vamos colocar a classe ativo, ou seja, a imagem que está visível ao usuário, agora é a imagem ativa.

Listagem 9: Criando a transição da imagem, caso haja uma imagem próxima

if($(".ativo").next().size()){							
$(".ativo").fadeOut().removeClass("ativo").next().fadeIn().addClass("ativo");
	}else{
	//faz algo
}

Se não houver imagens, depois da imagem ativa, ou seja, se chegou na última imagem, iremos fazer o seguinte:

  1. Escondemos a imagem ativa num efeito de fade.
  2. Tiramos a classe “ativo”, ou seja, a imagem não está mais ativa.
  3. Vamos capturar a primeira imagem do conjunto, ou seja, vamos voltar para a primeira imagem do slide e fazê-la aparecer com efeito de fade.
  4. Vamos colocar a classe ativo, ou seja, a imagem que está visível ao usuário, agora é a imagem ativa.

Listagem 10: Criando a transição da imagem, caso não houver uma imagem próxima

}else{
		$(".ativo").fadeOut().removeClass("ativo");
		$("#slide img:eq(0)").fadeIn().addClass("ativo");
}

Agora vamos manipular nossas legendas, para isto vamos capturar o texto que está dentro do atributo alt, e guardá-lo dentro de uma variável.

Listagem 11: Guardando o texto da legenda dentro de uma variável

var texto = $(".ativo").attr("alt");

Por fim iremos fazer a seguinte animação com a legenda:

  1. Esconderemos a legenda, de forma bruta (rápida).
  2. Colocaremos o texto que está dentro da variável "texto".
  3. Esperaremos meio segundo e exibiremos a legenda.

Listagem 12: Manipulação da legenda

$("#slide p").hide().html(texto).delay(500).fadeIn();

Bem, com isto e um pouco de imaginação estaremos aptos a fazer transições, bastante interessantes. Nosso slide está dinâmico e pronto para qualquer sistema web.

Os arquivos estão disponíveis para quem tiver alguma dificuldade na criação do slide.

Abraços e até a próxima.