Como criar um Slideshow com HTML, CSS e JS

22/10/18     HTML 5 Programação Tutorial Web Design

Hoje em dia é essencial que todo site tenha um slider, ou slide show para os mais chegados, através dele fica mais fácil a empresa comunicar o que precisa, seja um produto, promoção ou informações sobre ela mesma.

Neste tutorial, mostrarei a você como criar um slider, inteiramente na unha, para você usar em seu site, evitando assim o uso de plugins.

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.


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


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


<!-- Botões de anterior e próximo -->
<a class="anterior" onclick="controlador_slides(-1)">❮</a>
<a class="proximo" onclick="controlador_slides(1)">❯</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”.


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


<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[i].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[i].className = ponto_indicador[i].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.


// 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.


// 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.


* {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.


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[i].style.display = "none"; } indice_slide++; if (indice_slide > slides.length) {indice_slide = 1}
for (i = 0; i < ponto_indicador.length; i++) {
ponto_indicador[i].className = ponto_indicador[i].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.


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[i].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:


<a class="anterior" onclick="controlador_slides(-1, 1)">❮</a>
<a class="proximo" onclick="controlador_slides(1, 1)">❯</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.

Caso precise do código inteiro, baixe o arquivo do tutorial completo aqui.

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!



Novidades do BT por email

Coloque abaixo eu email para receber em primeira mão todas as novas matérias do BT, de tutoriais, cursos e inspirações!

Comente aqui

Publique um comentário abaixo

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

compartilhe
compartilhar no Facebook compartilhar no Twitter compartilhar no Linkedin compartilhar no Pintrest compartilhar no WhatzApp compartilhar no Skype compartilhar no pocket
Sobre o BT

Tudo começou com uma simples ajuda, um colega de trabalho estava tentando criar o seu álbum de fotos digital com uma música de fundo para poder dar de presente em seu casamento, até ai não tem nada ver com Bons Tutoriais, mas vamos chegar lá... Veja mais.

Patrocínio
Desenvolvimento de identidades visuais e estratégias de marketing digital
Recomendamos
AE Dicas Comunique 9 Minuto Design Mkt News Pixel Coffee Publicinove Revelando Ideias Sala7Design Tutorial Web Design
Criar um site

© Bons Tutoriais | Desde 2008 - Direitos reservados. ❤ Design | Ps+Ai+In | PHP+HTML+CSS | WordPress