Antes de iniciar, mostraremos no tutorial como criar dois tipos de sliders, veja no exemplo aqui.
1º – Criar a estrutura em HTML
Para fazer um slide show, precisamos inicialmente criar uma div que irá armazenar todas as imagens presentes nele.
|
1
2
3
4
|
<!-- Elemento que envolve o slideshow -->
<div class="caixa-slideshow">
</div>
|
Neste exemplo o nome da classe é “caixa-slideshow”, mas não se esqueça que as classes podem possuir qualquer nome que desejar, contanto que não tenha outra com o mesmo nome que faça algo diferente em seu site, pois isso resultaria em conflitos e devemos evitar sempre.
2º – Adicionar as imagens, suas numerações e descrições
Neste exemplo, cada slide de imagem possui 3 (três) informações: imagem, descrição e numeração, para melhorar a codificação, adicionaremos esses três itens dentro de uma div que neste exemplo possui a classe “meus-slides”, essa div será duplicada para cada imagem nova que o slide possuir e dentro dela colocaremos os itens citados acima.
Coloque essas divs dentro da div criada acima.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<!-- Bloco que contém número do slide, slide e descrição -->
<div class="meus-slides fade">
<div class="numero-imagem">1 / 3</div>
<img src="img/1.jpg" style="width:100%">
<div class="descricao-imagem">Descrição da primeira imagem</div>
</div>
<!-- Bloco que contém número do slide, slide e descrição -->
<div class="meus-slides fade">
<div class="numero-imagem">2 / 3</div>
<img src="img/2.jpg" style="width:100%">
<div class="descricao-imagem">Descrição da segunda imagem</div>
</div>
<!-- Bloco que contém número do slide, slide e descrição -->
<div class="meus-slides fade">
<div class="numero-imagem">3 / 3</div>
<img src="img/3.jpg" style="width:100%">
<div class="descricao-imagem">Descrição da terceira imagem</div>
</div>
|
3º – Adicionar os botões de “próximo” e “anterior”
Todos os slide show possuem botões em suas laterais para passar para o próximo slide ou voltar ao anterior. Para adicioná-los vamos colocar logo abaixo da última div com a classe “meus-slides” dois elementos “a” com suas respectivas classes, uma para voltar, que vamos chamar de “anterior”, e outra para adiantar, que vamos chamar de “próximo”, e ambas contento o atributo “onclick” chamando o método “controlador_slides()”, que vamos criar no fim do nosso script. Não se esqueça de colocar os parâmetros que estão dentro da chamada do método, mais a frente explicaremos sua função.
|
1
2
3
|
<!-- Botões de anterior e próximo -->
<a class="anterior" onclick="controlador_slides(-1)">&#10094;</a>
<a class="proximo" onclick="controlador_slides(1)">&#10095;</a>
|
4º – Adicionar controladores para cada slide existente
Geralmente os slides possuem logo abaixo das imagens, bolinhas ou qualquer outro ícone que represente qual a imagem que está sendo exibida atualmente e também servem como controladores para que possamos clicar em qual slide queremos ver no momento, assim pulando os outros e indo diretamente ao slide desejado.
Para fazer isso vamos adicionar uma nova div, assim que nossa div com a classe “caixa-slideshow” for fechada. Essa div irá possuir todos esses controladores.
Para cada slide adicionaremos um novo span com a classe “ponto-indicador-slide” e um atributo “onclick” chamando o método “slide_atual()” passando como parâmetro o número do slide a qual ele se refere. Esse método iremos criar logo logo.
Neste exemplo teremos 3 slides, portanto iremos adicionar 3 elementos “span”.
|
01
02
03
04
05
06
07
08
09
10
|
<!-- Pontos indicadores de slides -->
<div style="text-align:center">
<span class="ponto-indicador-slide" onclick="slide_atual(1)"></span>
<span class="ponto-indicador-slide" onclick="slide_atual(2)"></span>
<span class="ponto-indicador-slide" onclick="slide_atual(3)"></span>
</div>
|
5º – Adicionar o script principal
Se salvarmos o arquivo do jeito que está atualmente e abrimos para ver o que está acontecendo, vamos ver que todas as imagens estão sendo exibidas, porém uma abaixo da outra, de forma desorganizada, sem nenhuma interação com o usuário. Para adicionar essas interações vamos adicionar a tag “script” antes do fechamento da tag “body”.
Primeiramente vamos fazer o método principal que será responsável por mostra o slide atual e ocultar os outros slides, neste exemplo vamos chama-lo de “mostrar_slides(n)” e vamos passar a variável “n” como parâmetro do nosso método.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
<script type="text/javascript">
var indice_slide = 1; //essa variável será usada em todas as nossas funções e será responsável por dizer qual o slide atual
mostrar_slides(indice_slide); //aqui já estamos chamando a função para que o slide já comece mostrando o primeiro slide
// Função principal que mostra os slides
function mostrar_slides(n) {
var i; // será usada como um contador dentro de nossa função
var slides = document.getElementsByClassName("meus-slides"); //retorna todos os elementos que possuem a classe "meus-slides"
var ponto_indicador = document.getElementsByClassName("ponto-indicador-slide"); //retorna todos os elementos que possuem a classe "ponto-indicador-slide"
if (n > slides.length) {indice_slide = 1} // caso o número passado como parâmetro seja maior que o número de slides então chama o primeiro
if (n < 1) {indice_slide = slides.length} // caso o número passado como parâmetro seja menor que 1 nosso variável "indice_slide" receberá o número total de slides
for (i = 0; i < slides.length; i++) { //inicia um loop entre os slides
slides.style.display = "none"; //deixa o slide com display none
} //encerra o loop for
for (i = 0; i < ponto_indicador.length; i++) { //inicia um loop entre os pontos indicadores
ponto_indicador.className = ponto_indicador.className.replace(" ativo", ""); // remove a classe "ativo" do indicador
} // encerra o loop for
slides[indice_slide-1].style.display = "block"; // faz o slide atual aparecer
ponto_indicador[indice_slide-1].className += " ativo"; //adiciona a classe "ativo" para o indicador do slide atual
} //encerra a função
|
Após criar esse método, nosso slide show já está mais amigável, porém ainda não está usual já que só conseguimos ver o primeiro slide.
6º – Criar os botões de “Próximo” e “Anterior”
Neste passo, vamos criar o método que irá controlar os botões de “próximo“ e “anterior”, para que possamos navegar pelos slides.
|
1
2
3
4
5
6
7
|
// Função para controlar os botões controladores
function controlador_slides(n) {
/*quando passamos como parâmetro para os botões “próximo“ e “anterior”
eles serão usados nesta função para calcular qual o slide que deverá ser mostrado
por isso passamos como parâmetro os valores "1" e "-1" para ir para frente ou para trás*/
mostrar_slides(indice_slide += n);
}
7º – Criar os pontos indicadores de cada slide
Agora vamos fazer o método que será responsável por controlar os pontinhos que ficarão abaixo das imagens e que serão os representantes de cada slide.
Assim como na função criada acima, essa possui quase a mesma estrutura, a diferença é que ao invés de calcularmos um novo valor baseado nos parâmetros passados, vamos atribuir o valor do parâmetro diretamente.
|
1
2
3
4
|
// Função que controla o slide atual caso clique no ponto indicador
function slide_atual(n) {
mostrar_slides(indice_slide = n);
}
Se executarmos o código agora não iremos achar os pontinhos controladores, isso acontece porque ao contrário dos ícones dos botões “próximo” e “anterior” nossos pontinhos não são ícones e sim elementos “span” que serão estilizados para que possamos vê-los, mas caso queira adicionar um ícone fique à vontade.
8º – Adicionar o CSS
O back-end do nosso slide show já está encerrado, mas ainda não está muito amigável em questão de design. Neste último passo iremos adicionar o front-end para que ele fique ainda melhor e mais completo.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
* {box-sizing:border-box}
/* Div que envolve os slides */
.caixa-slideshow {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Esconde as imagens inicialmente */
.meus-slides {
display: none;
}
/* Botões de próximo e anterior */
.anterior,
.proximo {
cursor: pointer;
position: absolute;
background-color: rgba(0,0,0,0.3);
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Posicionando o botão 'próximo' a direita */
.proximo {
right: 0;
border-radius: 3px 0 0 3px;
}
/* Preencher o background dso botões com a cor preta no hover */
.anterior:hover,
.proximo:hover {
background-color: rgba(0,0,0,0.8);
}
/* Elemento que envolve a descrição das imagens */
.descricao-imagem {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
background-color: rgba(0,0,0,0.5);
bottom: 4px;
width: 100%;
text-align: center;
}
/* Elemento que envolve o número do slide */
.numero-imagem {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Pontos indicadores de slides */
.ponto-indicador-slide {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
/* Mudando o background color no hover ou quando ativo */
.ativo, .ponto-indicador-slide:hover {
background-color: #717171;
}
/* Efeito suave para troca de slide */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
Você pode estar olhando para o seu slide show e se perguntando “E se eu quiser deixá-lo rodando automaticamente? ”. Se você estiver, não se preocupe, verá isso logo abaixo.
9º – Automatizando o slide show
Neste caso, vamos remover os botões de “próximo e anterior” e também os pontos controladores, e iremos alterar o método principal.
Nosso método é praticamente igual, a diferença é que agora ele não possui mais parâmetros, ao fim do for onde definimos o “display none” acrescentamos + 1 ao valor do nosso índice e adicionamos uma última linha que serve para chamar nossa função a cada 2 segundos que passará novamente pelo loop adicionando mais 1 ao valor do índice e nos retornando o próximo slide, além disso agora nossa variável indice começa com o valor 0.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
var indice_slide = 0;
mostrar_slides();
function mostrar_slides() {
var i;
var slides = document.getElementsByClassName("meus-slides");
var ponto_indicador = document.getElementsByClassName("ponto-indicador-slide");
for (i = 0; i < slides.length; i++) { slides.style.display = "none"; } indice_slide++; if (indice_slide > slides.length) {indice_slide = 1}
for (i = 0; i < ponto_indicador.length; i++) {
ponto_indicador.className = ponto_indicador.className.replace(" ativo", "");
}
slides[indice_slide-1].style.display = "block";
ponto_indicador[indice_slide-1].className += " ativo";
setTimeout(mostrar_slides, 2000);
}
Não se esqueça de remover os botões e os pontos do conteúdo HTML também, já que não estão mais sendo usados.
10º – Adicionando múltiplos slideshows
Também é possível criar vários slideshows em uma aplicação, para fazer isso basta substituirmos o script atual pelo código abaixo.
Neste caso nossas variáveis passam a se tornar arrays já que possuímos mais de um slide, mas a base é a mesma, a diferença é que agora nossas funções passam a receber 2(dois) parâmetros para que consiga controlar corretamente.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
var indice_slide = [1,1];
var classe_slides = ["meus-slides","meus-slides-2"];
mostrar_slides(1, 0);
mostrar_slides(1, 1);
function controlador_slides(n, no) {
mostrar_slides(indice_slide[no] += n, no);
}
function mostrar_slides(n, no) {
var i;
var x = document.getElementsByClassName(classe_slides[no]);
if (n > x.length) {indice_slide[no] = 1}
if (n < 1) {indice_slide[no] = x.length}
for (i = 0; i < x.length; i++) {
x.style.display = "none";
}
x[indice_slide[no]-1].style.display = "block";
}
Como podemos ver no nosso novo código, nossos métodos ganharam mais um parâmetro, por isso, devemos passar esse novo parâmetro quando chamamos a função para a ação dos botões de “próximo” e “anterior”, assim como no código abaixo:
|
1
2
|
<a class="anterior" onclick="controlador_slides(-1, 1)">&#10094;</a>
<a class="proximo" onclick="controlador_slides(1, 1)">&#10095;</a>
Com esse novo código é possível criar diversos slideshows na mesma aplicação, mas não se esqueça de adicionar um novo parâmetro para cada slideshow adicionado e também adicionar uma nova classe de identificação única para aquele slideshow e adicioná-la no array de identificadores exatamente como fizemos neste último script.
Conclusão
Agora você já poderá criar quantos slideshows quiser e sem a necessidade de instalar algum plugin.
Espero que tenham gostado deste tutorial, qualquer dúvida é só comentar e também não se esqueça de compartilhar se curtiu, isso nos ajuda muito, até a próxima!
