Javascript - Aprenda a criar um slide puro

5/5 - (3 votes)

É bem comum em nossos projetos a grande necessidade em termos slides de imagens e quando pensamos nisso, a primeira coisa que vem cabeça é: Procurar um plugin do jQuery e Javascript.

Muitas vezes esses plugins possuem muitos recursos, quando na verdade o que você necessita é de algo simples, com apenas uma transição de imagens e com um efeito tipo fade.

Recentemente me solicitaram um exemplo de um slide simples. Pois bem! Nada melhor do que utilizar apenas o Javascript e um pouco de CSS para demonstrar que é possível realizar essa tarefa e mais: Com pouquíssimos códigos.

A ideia aqui não é dizer que você não deva utilizar jQuery, mas que você possa conhecer e explorar recursos do Javascript.

Portanto, divirta-se descobrindo esses recursos incríveis 🙂

Então vamos lá.

Primeiro, vou mostrar a estrutura das pastas e arquivos:

Teremos os seguintes arquivos:

index.html, que terá nossa marcação e que chamará os arquivos css e javascript.
css/style.css, que irá conter nosso estilo.
js/slider.js, que criará o efeito de alternância de imagens.

E a pasta images, que terão nossas imagens, claro!

Como dito, no arquivo index.html teremos nossa marcação; o código está comentado pra uma melhor compreensão.

Trabalhando o JavaScript

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta charset="UTF-8">
	<title>Slide Show</title>
	<!--Chama o arquivo style.css -->
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<!-- Define a lista não ordenada com as imagens -->
	<ul id="sliders">
		<!-- 
			Define uma classe no primeiro item, 
			para garantir que será mostrado
			ao acessar a página
		-->
		<li class="slider-active"><img src="images/slider-01.jpg" /></li>
		<li><img src="images/slider-02.jpg" /></li>
		<li><img src="images/slider-03.jpg" /></li>
	</ul>
	
	<!--Chama o arquivo slider.js-->
	<script src="js/slider.js"></script>
</body>
</html>

Agora iremos para o arquivo style.css, que está na pasta css. Nele iremos definir as dimensões, ocultar os itens, e posicionar o slide atual.

O código está comentado:

/**Definiremos as configurações do Container do slide **/
#sliders{
	/*Remove o bullet*/
	list-style: none;  
	/* Define que position:relative porque os 
	 * elementos filhos usarão absolute
	 */
	position: relative; 
	/*Define a largura*/
	width: 800px;
	/*Define uma altura*/
	height:300px;
        /*Centralizar na horizontal*/
	margin:0 auto;
	/*Oculta os elementos que ultrapassarem 
	* as dimensões definidas
	*/
	overflow: hidden;
}
/*Configuremos os itens do slide*/
#slider li{
	/*Definimos como posição absoluta, seguindo o elemento pai*/
	position: absolute;
	/*Define que ficará encostado no topo*/
	top:0;
	/*Define que ficará enconstado do lado esquerdo*/
	left:0;
	/*Coloca a opacidade zero, pra ocultar*/
	opacity: 0;
	/*Define ordenação relacionados os elementos*/
	z-index: 0;
	/*Cria uma transição da opacidade com 1 segundo*/
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	transition: opacity 1s;
}

/* Agora defiremos uma classe 
 * que mostrar o item atual
 */
#sliders li.slider-active{
	/*Ordena que ficará a frente dos itens*/
	z-index: 1;
	/*Mostra o slide atual*/
	opacity: 1;
}

Agora vamos para o arquivo slider.js. Nele iremos adicionar e remover, por intervalo de tempo, a classe slider-active e quando o elemento estiver com essa classe, ele ira exibir o item e ocultar os outros.

Vamos ao código comentado:

/*
	Pega todos os elementos li da lista não ordenada
	retornando um objeto NodeList, 
	de acordo com posicionamento encontrado
	no documento

*/
var sliders  = document.querySelectorAll('#sliders li');
/*
 Define o indice, que será responsavel 
 por informar os slider atual
 */
var current  = 0;
/*
 Retorna o total de itens do slide.
 Diminui menos 1, devido o primeiro
 item começa com zero. 
 Se temos 2 items, sua posição:
 0,1,2
*/
var total    = sliders.length - 1;
/*
  Executaremos uma função num intervalo de tempo.
  E defiremos que executará em 2000 milesegundos
*/
window.setInterval(function(){
	/*
	 a variavel index será responsável pela
	 posição do elemento que iremos remover a classe
	*/
	var index =  current ? current - 1 : total;
	/*Pega o elemento pra remover a classe*/
	sliders[index].className  = '';
	/*Adiciona a classe no elemento atual*/
	sliders[current].className  = 'slider-active';
	/*Calcular a posição do próximo elemento que será exibido*/
	current = current >= total ? 0 : current+1; 	
}, 2000);

A lógica aplicada é adicionar uma classe no elemento atual, e remover da anterior que foi exibido. Se o elemento a ser exibido for o primeiro, então ele remove a classe do último elemento e assim o ciclo será recorrente.

Dica: Quer se especializar em desenvolvimento e aprender Javascript, jQuery, HTML5, CSS3 e muito mais? Conheça nossos cursos online de Desenvolvimento Front-End.

Segue o link com o exemplo do slide funcionando:

https://www.mxcursos.com/blog/exemplos/slideshow

E aqui, você pode baixar os arquivos:

https://www.dropbox.com/s/dcf0wq45ipwxdhx/slide.zip?dl=0

Espero que tenham gostado a dica.

Se tiver dúvidas, basta deixar um comentário abaixo e claro, compartilhe este post.

Um abraço e até mais!

Twittar