Depois de criar um artigo no devmedia de como criar um slideshow do zero em Jquery sem plugins, recebi vários pedidos para fazer o mesmo com javascript, também pude notar que muitas pessoas estavam com dificuldade em colocar link nas imagens e os botões de anterior/próximo. Veremos neste artigo como criar um slideshow do zero apenas com javascript e uma dose elegante de CSS3, com controladores, legendas e links nas imagens.
Abaixo o resultado final do nosso slide:
Estrutura HTML
Nossa estrutura html é bem simples, veja na listagem 1:
Listagem 1 – Estrutura html do slideshow
Onde:
, –> Serão os controladores do nosso slide
Let’s go! vamos agora estilizar nosso slide.
Estilo CSS
Abaixo na listagem 2, o nosso estilo css, não explicarei a fundo nossa estilização, irei focar apenas nos principais pontos
**Listagem 2 – **Estilo css
Onde:
.trs –> class que define a transição das imagens do nosso slide e dos nossos controladores
.ativo –> class que define qual imagem está ativa
figure:hover span –> faz com que mostre nossos controladores ao passar o mouse no nosso slide
Parece que tudo está indo bem, vamos começar a brincar agora com nosso slider, gogo ninja lvl2 😀
Veremos cada passo do código javascript bem detalhado para que não haja dúvida alguma ao termino do post.
Primeiramente vamos criar uma função **setaImagem **e colocar para que ela rode quando a janela (window) for carregada:
Listagem 3 – Criação da função “setaImagem”
onde:
window.addEventListener(“load”,setaImagem,false); –> faz com que a função “setaImagem” seja executada quando a janela for carregada
Agora iremos criar nossa variável “settings” que receberá alguns objetos e funções anonimas.
**Listagem 4 **– Criando nossa varável “settings”, já com duas funções anonimas dentro, que são “legenda” e “primeiraImg”
Onde:
var settings = {} –> define uma variavel “settings” que conterá as configurações do nosso slide
primeiraImg: function(){…} –> Função que seta a imagem que aparecerá inicialmente no nosso slide
elemento = document.querySelector(“#slider a:first-child”); –> captura a primeira tag “” da “div#slider” e coloca numa variavel elemento.
elemento.classList.add(“ativo”); –> coloca a classe ativo na tag capturada (elemento.classList.add(“ativo”)).
this.legenda(elemento); –> chama a função anonima “legenda” e passa como parâmetro a variável elemento que acabamos de criar
legenda:function(obj){…} –> função anonima que coloca captura o atributo “alt” da tag “” que tem como pai, o parâmetro determinado como “obj” e coloca como legenda do slideshow
var legenda = obj.querySelector(“img”).getAttribute(“alt”); –> captura o atributo “alt” da tag “” que tem como pai, o parâmetro determinado como “obj” (que neste caso é a primeira tag “”) e coloca numa variável legenda
document.querySelector(“figcaption”).innerHTML = legenda; –> coloca o html, que está dentro do atributo alt da variavel legenda, dentro da tag “” que neste caso é a nossa legenda do slideshow.
Até agora tudo certo, mas note que se você executar nosso documento, nada acontece, isto porque não chamamos nossa função de setar a imagem.
**Listagem 5 **– chamando nossa variavel settings e suas respectivas funções anonimas
Primeiro chamamos nossa função de setar a imagem no slideshow, depois setamos sua legenda e por fim, acionamos um temporizador que roda nosso slide a cada 4 segundos.
Vamos agora adicionar mais uma função à configuração do nosso slide, seu nome será “slide”. Esta função servirá para controlar as transições automáticas do nosso slideshow.
obs: Adicione a linha de código abaixo, dentro da variável settings
**Listagem 6 **– Criação da função slide
Primeiro criamos nossa função slide, dentro dela, capturamos a tag que contém a class “ativo” e colocamos numa variável “elemento”, logo em seguida fazemos uma verificação, se ouver uma tag após a tag “ativo” colocamos nesta outra tag a classe ativo, adicionamos a legenda dela no nosso slide e retiramos a classe ativo da nossa imagem que está ativa. Se não ouver nenhuma outra tag, tiramos a classe “ativo” da imagem que está ativa, e chamamos a função “primeiraImg” que servirá para setar a primeira imagem no nosso slide.
show de bola! nosso slide está rodando, mas note que nossos controladores ainda não funcionam, vamos agora fazer eles funcionarem.
Primeiro vamos criar nossa função que mostra a próxima imagem “próximo”:
**Listagem 7 **– Função “próximo”
O processo da função anonima “proximo” é o mesmo da função slide, apenas adicionamos um clearInterval(intervalo), que irá limpar o temporizador(tempo de execução) do nosso slide, e ao final da função reiniciamos nosso temporizador.
Agora iremos criar a função para mostrar a imagem anterior
**Listagem 8 **– função “anterior”
Esta função também é quase a mesma que a anterior, so mudamos onde tem “next”(próximo) e colocamos “previous”(anterior).
Ainda falta anexar o evento de click nos nossos controladores, segue abaixo
Listagem 9 – Anexando a função de clique nos controladores
Obs: Coloque a função de clique nos controladores no final da função “setaImagem”
Disponibilizei nosso código no github para quem quiser contribuir ou esteja tendo algum problema no slide (clique aqui)
Bem amigos ninjas javascript’s, com isso terminamos nosso post, um forte abraço e até a próxima
Abaixo nosso código javascript completo:
Apoio: A Netflix elegeu a NET Internet como a banda larga mais rápida do Brasil. Acesse e confira os pacotes em oferta na sua casa!
