Skip to main content

Slide Show Pictures (HTML/CSS en JS)

 

 

 

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