CSS Slideshow - Creating a Dynamic Image Gallery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Slideshow - Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <div class="slideshow-container">
        <div class="slide fade">
            <img src="/img/narava1.png" alt="Nature 1">
        </div>
        <div class="slide fade">
            <img src="/img/narava2.png" alt="Nature 2">
        </div>
        <div class="slide fade">
            <img src="/img/narava3.png" alt="Nature 3">
        </div>

        <div class="controls">
            <button class="prev" onclick="changeSlide(-1)">&#10094;</button>
            <button class="next" onclick="changeSlide(1)">&#10095;</button>
        </div>
    </div>
</body>
</html>

.slideshow-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.slide {
    display: none;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.slide.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide img {
    display: block;
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 8px;
}

.controls {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    pointer-events: none;
}

.prev, .next {
    pointer-events: auto;
    background: var(--card);
    border: 1px solid var(--border);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--fg);
    transition: all 0.3s ease;
}

.prev:hover, .next:hover {
    background-color: #007bff;
    color: white;
    -webkit-text-fill-color: white;
}

.fade {
    animation: fade 0.5s ease-in-out;
}

@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}

@media screen and (max-width: 768px) {
    .slideshow-container {
        margin: 0 10px;
    }
    .prev, .next {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

let slideIndex = 1;

// Instead of immediate execution, we wait for the DOM to be ready
if (document.readyState === 'complete' || document.readyState === 'interactive') {
    initSlideshow();
} else {
    document.addEventListener("DOMContentLoaded", initSlideshow);
}

function initSlideshow() {
    const slides = document.getElementsByClassName("slide");
    if (slides.length > 0) {
        showSlides(slideIndex);
    }
}

// CRUCIAL CHANGE: We attach the changeSlide function to the global 'window' object
// so that the HTML button (onclick) can see it from outside the IIFE scope!
window.changeSlide = function(n) {
    showSlides(slideIndex += n);
}

function showSlides(n) {
    const slides = document.getElementsByClassName("slide");
    
    if (slides.length === 0) return;

    if (n > slides.length) {
        slideIndex = 1;
    }
    if (n < 1) {
        slideIndex = slides.length;
    }

    for (let i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
        slides[i].classList.remove("active");
    }

    if (slides[slideIndex-1]) {
        slides[slideIndex-1].style.display = "flex";
        slides[slideIndex-1].classList.add("active");
    }
}

CSS Slideshow - Dynamic Image Gallery

Vadnica.org

Links

Support