# 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
```HTML
Rotating Images
```
### CSS
```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
```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
```
