Blog do MX Cursos

Criando um slideshow com JavaScript puro

Avaliar post

É 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

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:

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:

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:

https://blog.mxcursos.com/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!

David CHC

David CHC

Trabalha com desenvolvimento web há 10 anos, atuou como programador líder do MX Cursos por mais de 8 anos e hoje dedica-se exclusivamente à criação de cursos para a plataforma. Possui vasto conhecimento em PHP, Javascript, HTML5, CSS3, Gulp.js, GIT, MySQL

Your Header Sidebar area is currently empty. Hurry up and add some widgets.

Newsletter

Newsletter

Receba em seu e-mail conteúdos semanais sobre desenvolvimento, design, audiovisual e tecnlogia.

Inscrição realizada com sucesso!