Artigo original: How to Create a Slideshow with HTML, CSS, and JavaScript
Uma apresentação de slides para a web é uma sequência de imagens ou de texto que consiste em mostrar um elemento da sequência em um determinado intervalo de tempo.
Para este tutorial, você pode criar uma apresentação de slides seguindo estes passos:
Escreva a marcação em HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slideshow</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="slideshow-example" data-component="slideshow">
<div role="list">
<div class="slide">
<img src="" alt="">
</div>
<div class="slide">
<img src="" alt="">
</div>
<div class="slide">
<img src="" alt="">
</div>
</div>
</div>
<script src="slideshow.js"></script>
</body>
</html>Escreva os estilos para ocultar slides e mostrar apenas um slide.
Para ocultar os slides, você tem de dar a eles um estilo padrão. Isso orientará a mostrar apenas um slide se ele estiver ativo ou se você quiser mostrá-lo.
[data-component="slideshow"] .slide {
display: none;
}
[data-component="slideshow"] .slide.active {
display: block;
}Altere os slides em um intervalo de tempo.
O primeiro passo para alterar quais slides aparecem é selecionar o(s) wrapper(s) dos slides e, depois, os slides em si.
Ao selecionar os slides, você tem de passar por cada slide e adicionar ou remover a classe active, dependendo do slide que você quer mostrar. Depois, basta repetir o procesos por um determinado intervalo de tempo.
Lembre-se de que, quando você remove a classe active de um slide, você o estará ocultando, em função dos estilos definidos no passo anterior. Porém, ao adicionar a classe active ao slide, você sobrescreverá o estilo display:none com o estilo display:block, o que fará com que o slide seja exibido aos usuários.
var slideshows = document.querySelectorAll('[data-component="slideshow"]');
// Aplica a todas as apresentações de slides que você define com o HTML escrito
slideshows.forEach(initSlideShow);
function initSlideShow(slideshow) {
var slides = document.querySelectorAll(`#${slideshow.id} [role="list"] .slide`); // Obter um array de slides
var index = 0, time = 5000;
slides[index].classList.add('active');
setInterval( () => {
slides[index].classList.remove('active');
//Passar por cada slide, incrementando o índice
index++;
// Ao passar por todos os slides, reiniciar o índice para exibir o primeiro slide e iniciar novamente
if (index === slides.length) index = 0;
slides[index].classList.add('active');
}, time);
}