Una presentación de diapositivas web es una secuencia de imágenes o texto que consiste en mostrar un elemento de la secuencia en un intervalo de tiempo determinado.
Para este tutorial, puede crear una presentación de diapositivas siguiendo estos sencillos pasos:
Escribe algo de marcado
Slideshow ![]()
![]()
![]()
Escriba estilos para ocultar diapositivas y mostrar solo una diapositiva.
Para ocultar las diapositivas, debe darles un estilo predeterminado. Le indicará que solo muestre una diapositiva si está activa o si desea mostrarla.
[data-component="slideshow"] .slide { display: none; } [data-component="slideshow"] .slide.active { display: block; }Cambie las diapositivas en un intervalo de tiempo.
El primer paso para cambiar qué diapositivas se muestran es seleccionar los envoltorios de diapositivas y luego sus diapositivas.
Cuando selecciona las diapositivas, debe repasar cada diapositiva y agregar o eliminar una clase activa según la diapositiva que desee mostrar. Luego, repita el proceso durante un cierto intervalo de tiempo.
Tenga en cuenta que cuando elimina una clase activa de una diapositiva, la está ocultando debido a los estilos definidos en el paso anterior. Pero cuando agrega una clase activa a la diapositiva, está sobrescribiendo el estilo display:none to display:block, por lo que la diapositiva se mostrará a los usuarios.
var slideshows = document.querySelectorAll('[data-component="slideshow"]'); // Apply to all slideshows that you define with the markup wrote slideshows.forEach(initSlideShow); function initSlideShow(slideshow) { var slides = document.querySelectorAll(`#${slideshow.id} [role="list"] .slide`); // Get an array of slides var index = 0, time = 5000; slides[index].classList.add('active'); setInterval( () => { slides[index].classList.remove('active'); //Go over each slide incrementing the index index++; // If you go over all slides, restart the index to show the first slide and start again if (index === slides.length) index = 0; slides[index].classList.add('active'); }, time); }