HTML Programação Tutorial Web Design

Como criar um Slideshow com HTML, CSS e JS

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.

Publicidade


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

Publicidade

0 Compart.
Compartilhar
Twittar
Compartilhar
Pin