Original article: How to Create a Slideshow with HTML, CSS, and JavaScript
Una presentación de diapositivas es una secuencia de imágenes o texto que consiste en mostrar un elemento de la secuencia en un intervalo de tiempo determinado.
En este tutorial puedes crear una secuencia de diapositivas siguiendo estos sencillos pasos:
Escriba en el 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>Escribir estilos para ocultar diapositivas y mostrar solo una diapositiva.
Para ocultar las diapositivas tienes que darles un estilo por defecto. Esto indicará que solo muestres una diapositiva si está activa o si quieres mostrarla.
[data-component="slideshow"] .slide {
display: none;
}
[data-component="slideshow"] .slide.active {
display: block;
}Cambia las diapositivas en un intervalo de tiempo.
El primer paso para cambiar las diapositivas que se muestran es seleccionar el componente padre de las diapositivas y luego sus diapositivas.
Cuando selecciones las diapositivas tienes que ir sobre cada diapositiva y añadir o quitar la clase active dependiendo de la diapositiva que quieras mostrar. Después solo tienes que repetir el proceso durante un intervalo de tiempo determinado.
Tenga en cuenta que cuando elimina una clase active de una diapositiva, la está ocultando debido a los estilos definidos en el paso anterior. Pero cuando añades una clase active a la diapositiva, estás sobrescribiendo el estilo display:none a display:block, en consecuencia la diapositiva se mostrará a los usuarios.
var slideshows = document.querySelectorAll('[data-component="slideshow"]');
// Aplicar a todas las diapositivas que defina con la marca escrita
slideshows.forEach(initSlideShow);
function initSlideShow(slideshow) {
var slides = document.querySelectorAll(`#${slideshow.id} [role="list"] .slide`); // Obtener una matriz de diapositivas
var index = 0, time = 5000;
slides[index].classList.add('active');
setInterval( () => {
slides[index].classList.remove('active');
// Recorre cada diapositiva incrementando el índice
index++;
// Si repasa todas las diapositivas, reinicie el índice para mostrar la primera diapositiva y volver a empezar
if (index === slides.length) index = 0;
slides[index].classList.add('active');
}, time);
}