David CHC

Aprenda a 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:

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.

<!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

*/
const sliders = document.querySelectorAll('#sliders li');
/*
Define o indice, que será responsavel
por informar os slider atual
*/
let 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
*/
const 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
  */
  const lastPositionSlide = currentPositionSlide ? currentPositionSlide1 : 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.

E aqui, você pode baixar os arquivos:

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

Compartilhar a publicação

Trabalha com desenvolvimento web há 15 anos, atuou como programador líder do MX Cursos por mais de 8 anos.  Possui vasto conhecimento em PHP, Javascript, HTML5, CSS3,  GIT, MySQL

Deixe uma resposta

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

Sobre

Trabalho  com desenvolvimento web há 17 anos, atuou como programador líder do MX Cursos por mais de 8 anos . Possui vasto conhecimento em PHP, Javascript, HTML5, CSS3,  GIT, MySQL, WordPress, WooCommerce

© 2023 – Todos direitos reservados