Skip to main content

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotating Images</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="slideshow">
        <img src="image1.jpg" alt="Image 1" class="active">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
        <img src="image4.jpg" alt="Image 4">
    </div>

    <script src="script.js"></script>
</body>
</html>

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

 

 

 

 

 

Back to top