Image Slider in Javascript

Question

Wie kann ich einen einfachen Image Slider in Javascript erstellen?

<style>
body {
    font-family: Arial, sans-serif;
    text-align: center;
}

.slider {
    max-width: 600px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.slider img {
    width: 100%;
    display: none;
}

button {
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 16px;
}
</style>

<div class="slider">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <img src="image4.jpg" alt="Image 4">
</div>

Answer 1

Du kannst die Bilder durch einen einfachen Klickmechanismus wechseln.

<style>

// ...

button {
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 16px;
}
</style>

<div class="slider">
    <img src="image1.jpg" alt="Image 1">
    <img src="image2.jpg" alt="Image 2">
    <img src="image3.jpg" alt="Image 3">
    <img src="image4.jpg" alt="Image 4">
</div>

<button class="prev">Previous</button>
<button class="next">Next</button>

Der JavaScript Code definiert Funktionen zum Anzeigen des aktuellen Bildes, zum Wechseln zum nächsten und vorherigen Bild sowie zum Hinzufügen von EventListener für die Schaltflächen.

document.addEventListener('DOMContentLoaded', function() {
    const slides = document.querySelectorAll('.slider img');
    let currentSlide = 0;

    function showSlide(index) {
        slides.forEach((slide, i) => {
            if (i === index) {
                slide.style.display = 'block';
            } else {
                slide.style.display = 'none';
            }
        });
    }

    function nextSlide() {
        currentSlide = (currentSlide + 1) % slides.length;
        showSlide(currentSlide);
    }

    function prevSlide() {
        currentSlide = (currentSlide - 1 + slides.length) % slides.length;
        showSlide(currentSlide);
    }

    document.querySelector('.next').addEventListener('click', nextSlide);
    document.querySelector('.prev').addEventListener('click', prevSlide);

    showSlide(currentSlide);
});