Slide Show Pictures (HTML/CSS en JS)
Hoe maak je een slide show?
Opacity
Je hebt 4 images en via de CSS heeft elke img een opacity van 0 en is daarmee doorzichtig.
Class Active
Het enige plaatje dat je ziet, is het plaatsje dat via de class active een opacity van 1 heeft gekregen.
Javascript
Het JavaScript zorgt ervoor dat het plaatje de class active wordt weggehaald ( remove ) en dat het volgende plaatje de class active krijgt.
Via de transition in de CSS wordt de overgang van het ene naar het andere plaatje op 0.5 seconden gezet. Het JS loopt oneindig door en ververst elke 3000 ms (=3 seconden) het plaatje.
HTML
Rotating Images
CSS
.slideshow {
position: relative;
width: 300px; /* Adjust based on your image's width */
height: 200px; /* Adjust based on your image's height */
overflow: hidden;
}
.slideshow img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s;
}
.slideshow img.active {
opacity: 1;
}
JavaScript
let currentImageIndex = 0;
const images = document.querySelectorAll('.slideshow img');
const totalImages = images.length;
setInterval(() => {
// Hide the current image
images[currentImageIndex].classList.remove('active');
// Move to the next image or loop back to the first one
currentImageIndex = (currentImageIndex + 1) % totalImages;
// Show the new current image
images[currentImageIndex].classList.add('active');
}, 3000); // Change the images every 3 seconds
