Criar um slideshow com JavaScript

É 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:

 

pasta-slide

 

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 currentPositionSlide  = 0;
/*
 Retorna a último posição do slide.
 Diminui menos 1, devido o primeiro
 item começa com zero. 
 Se temos 2 items, sua posição:
 0,1,2
*/
var endPositionSlide    = 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 lastPositionSlide =  currentPositionSlide  ? currentPositionSlide  - 1 : endPositionSlide;
	/*Pega o elemento pra remover a classe*/
	sliders[lastPositionSlide].className  = '';
	/*Adiciona a classe no elemento atual*/
	sliders[currentPositionSlide].className  = 'slider-active';
	/*Calcular a posição do próximo elemento que será exibido*/
	currentPositionSlide= currentPositionSlide >= endPositionSlide? 0 : currentPositionSlide+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.

Segue o link com o exemplo do slide funcionando:

http://www.davidchc.com.br/exemplos/slideshow/

E aqui, você pode baixar os arquivos:

https://github.com/davidchc/tutorial-slideshow-javascript

 

Espero que tenham gostado.




Se o conteúdo foi relevante para você, e desejar, você pode incentivar fazendo uma doação.

7 thoughts on “Criar um slideshow com JavaScript

  1. Eu não entendi muito a parte da variável index . Você poderia me explicar melhor?
    Pelo que entendi os operador ternário vai adicionar um valor a uma variável baseado em uma condição , se ela for verdadeira então assume um valor, se for falsa assume outro valor completamente diferente, eu não entendi qual foi a condição usada para definir o valor da variável index.

    1. Sem problema Luiz.

      Sua duvida é muito interessante, porque leva algo que todos sentem dificuldade, e me incluo nisso, que dá nome a variáveis, funções, classes, etc.

      Talvez pelo nome da variável chamado index, ela não representa muita coisa. Apesar de sempre usado como ponteiro, mas nesse caso não é interessante.

      Se eu trocasse esse index, por lastPositionSlide ou previousPositionSlide, acho você de cara entenderia o que ela representa.

      A variável index ele vai servir pra remover classe slider-active do slide anterior, antes de adicionar no slide que irá ser mostrado.

      Aproveitei sua dúvida, e atualizei o nome das variáveis para ficar melhor para entender.

      Se ainda tiver dúvida, posta aqui nos comentários que tentarei explicar.

      Abrs

      1. Obrigado pro responder.
        Continuo com dúvidas na parte do operador ternário da variável index onde vai a condição. == currentPositionSlide == ? currentPositionSlide – 1 : endPositionSlide; Não entendi a lógica por trás da condição. Porque a variável currentPositionSlide está sozinha? O que isso quer dizer? Qual é a lógica?
        Não entendi muito a lógica dessa condição , o porque e o significado da variável currentPositionSlide estar sozinha. (Não sei o que significa).
        O slide funciona perfeitamente, mas não entendi só essa parte mesmo. Muito obrigado por dividir o seu conhecimento comigo e com tantas outras pessoas.
        Achei o código muito simples e legal. Parabéns.

        1. Luiz, vamos lá:

          O importante é entender a logica, e depois vai consegui entender os passos.

          A ideia desse slide é adicionar uma classe slider-active a cada intervalo de 2 segundos a um elemento, e quando adicionar em um elemento, remover do elemento anterior que tinha sido adicionado.

          Inicio
          item 1 -> adiciona classe slider-active
          item 2
          item 3

          Depois de 2 segundos

          item 1 -> remove classe slider-active
          item 2 -> adiciona classe slider-active
          item 3

          Depois de mais 2 segundos

          item 1 ->
          item 2 -> remove classe slider-active
          item 3 -> adiciona classe slider-active

          Depois de mais 2 segundo

          item 1 -> adiciona classe slider-active
          item 2 ->
          item 3 -> remove classe slider-active

          Basicamente isso que acontece.

          A variável currentPositionSlide define que vai ser exibido, ele inicia como valor 0, pq zero é a primeira posição.
          A variável lastPositionSlide define quem foi ultimo item exibido, para pode remove-lo e só assim adicionar no slide q será exibido naquele momento.

          var lastPositionSlide = currentPositionSlide ? currentPositionSlide – 1 : endPositionSlide;

          Se currentPositionSlide for verdadeiro, que no caso for maior 0, eu pego a posição do elemento que seria exibido no momento, diminuo menos 1, para pode pegar o ultimo item que foi exibido, senão pega a posição do ultimo elemento. Pq o ultimo elemento? Pq pode ser q terminou o ciclo do slide, e voltou ao inicio.

          No final, ele define o currentPositionSlide para ser o proximo que será exibido.

          E assim tudo se repete.

          1. Obrigado pela ajuda. Eu gostaria de saber como você faz para aprender um nova linguagem de programação, qual é a maneira mais eficiente de se aprender um nova linguagem de programação?Eu estudo javascript utilizando as referências da W3schools, mas não sei se estou fazendo do jeito certo. Se você puder me ajudar ficarei muito grato.

          2. Luiz, atualmente é quando precisa de fazer algo em algum projeto, ai me força a estudar. Quando comecei, eu acessava muito foruns, como do iMasters, e participava tentando tirar duvidas, pq me forçava a ver algo novo e real. Pra javascript eu recomendo o MDN, ele é muito bom, e vale a pena:

            https://developer.mozilla.org/pt-BR/docs/Web/JavaScript

            Você pode buscar tbm em videoaulas no Youtube, pq vai encontrar ótimos materiais q vão te ajudar tbm.

            Espero q te ajude.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *