Criando um slider sem plugins
Veja como criar um efeito de slider apenas com JavaScript
Neste exemplo, vamos aprender como criar um slider apenas com JavaScript, sem utilizar nenhuma biblioteca.
Para isso, vamos criar um HTML com quatro DIVs, cada DIV vai ter uma cor diferente que será aplicada utilizando CSS.
<div id="slider">
<div>
<div id="vermelho"></div>
<div id="azul"></div>
<div id="verde"></div>
<div id="preto"></div>
</div>
</div>
Se você testar este HTML, não vai aparecer nada em sua página. Isso ocorre porque as DIVs não tem conteúdo. Precisamos definir medidas para o slider, para isso, vamos utilizar o CSS. Primeiro, vamos definir a cor de fundo de cada uma quatro divs do nosso slider.
#vermelho{
background-color : red
}
#azul{
background-color : blue
}
#verde{
background-color : green
}
#preto{
background-color : black
}
Agora, vamos definir as medidas do container, que é a div com o id "slider".
#slider{
width : 400px;
height : 160px;
overflow : hidden;
}
#slider div{
height : 160px;
}
Isso deve exibir quatro retângulos coloridos, um abaixo do outro.
O que vamos fazer é:
1 - Criar um container chamado slider, com as dimensões de 400 x 160 pixels.
2 - Vamos adicionar dentro do elemento com a id "slider" um segundo container, que vai ter a largura igual ao total de slides multiplicado por 400 pixels, o que vai dar 1600 pixels.
3 - Dentro deste segundo container, vamos adicionar o conteúdo que queremos exibir.
4 - Por último, vamos utilizar JavaScript para fazer a transição entre cada slide.
Vamos mudar a exibição dos quatro slides, ao invés de exibir um abaixo do outro, vamos exibir um ao lado do outro. Para isso, vamos acrescentar o seguinte estilo:
#slider>div{
width : 1600px;
height : 160px;
}
#slider>div>div{
width : 400px;
float : left;
}
O que os estilos acima fazem é criar uma dimensão fixa para o segundo container, e depois, para os elementos filhos, definir que o posicionamento deve ser um ao lado do outro (float: left).
Por último, vamos fazer apenas a exibição do primeiro elemento filho. Para isso, basta alterar o container "slider" e adicionar "overflow: hidden"
#slider{
width : 400px;
height : 160px;
overflow : hidden;
}
Agora que fizemos a parte visual, temos que fazer a animação para trocar de slide. Para isso, vamos usar o JavaScript. Vamos criar um script no final da página que faça o seguinte:
var slider = document.querySelector('#slider>div');
var margin = 0;
setInterval(function(){
margin = (margin + 400) % 1600
console.log(margin);
slider.style['margin-left'] = '-'+margin +'px'
},5 * 1000);
Neste exemplo, estamos utilizando a função "SetInterval" para executar uma determinada programação após um certo tempo, em nosso caso, 5 segundos, como esta função trabalha como milisegundos, temos que multiplicar o número de segundos por 1000.
Utilizando o "document.querySelector", selecionamos o segundo container, que possui dentro os quatro slides.
O que vamos fazer é mudar a margem esquerda do segundo container, aumentando sempre em 400 pixels, que é a largura que definimos para cada slide. Quando o valor da margem esquerda deste segundo container ultrapassar o resultado do número de slides * 400 pixels (1600 pixels), o valor da margem esquerda vai ser zero, o que vai fazer voltar a exibição do primeiro elemento.
O código final com o exemplo completo pode ser visto neste link:
