JS Slider-Komponente: Eine ausführliche Erklärung

By /
JavaScript JS Slider Komponente

In diesem Artikel möchte ich erklären, wie ich eine JS Slider-Komponente entwickelt habe. Diese Komponente ist in HTML, CSS und JavaScript implementiert und bietet eine benutzerfreundliche, responsive Darstellung mit Übergängen zwischen den einzelnen Folien.

Ich werde auf den Aufbau der HTML-Struktur eingehen, die verwendeten CSS-Stile erläutern und insbesondere die Funktionsweise des JavaScript-Codes detailliert erklären.

Komponente ausprobieren
Den Quellcode erhalten

HTML-Struktur

Der HTML-Code bildet die Grundstruktur der Slider-Komponente.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slider Component</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="slider">
        <div class="slider-container">
            <div class="slide active">
                <div class="slide-icon">&#9733;</div>
                <h3>Slide 1</h3>
                <p>Beschreibung der ersten Folie.</p>
                <button class="slide-button">Mehr erfahren</button>
            </div>
            <div class="slide">
                <div class="slide-icon">&#9734;</div>
                <h3>Slide 2</h3>
                <p>Beschreibung der zweiten Folie.</p>
                <button class="slide-button">Mehr erfahren</button>
            </div>
            <!-- Weitere Folien können hier hinzugefügt werden -->
        </div>
        <div class="slider-controls">
            <button class="prev-slide">&#10094;</button>
            <button class="next-slide">&#10095;</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS-Styling

Das Styling sorgt für ein modernes und responsives Erscheinungsbild. Wichtige Punkte sind:

  • Container-Layout: Die Klasse .slider sorgt für die zentrale Positionierung und den visuellen Rahmen.
  • Animation und Übergänge: Der .slider-container verwendet eine transition, um weiche Übergänge zwischen den Folien zu ermöglichen.
  • Responsiveness: Media Queries garantieren, dass der Slider auf mobilen Geräten optimal dargestellt wird.

Hier ein Beispiel für das Styling:

.slider {
    position: relative;
    max-width: 90%;
    margin: 40px auto;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 10px;
    padding: 20px;
}

.slider-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

.slide.active {
    display: flex;
}

.slide-button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

.slide-button:hover {
    background-color: #0056b3;
}

JavaScript-Funktionalität

Der JavaScript-Code ist das Herzstück der Interaktivität. Er sorgt für die Navigation zwischen den Folien und die Steuerung der Animationen.

document.addEventListener('DOMContentLoaded', () => {
    const slides = document.querySelectorAll('.slide');
    const prevButton = document.querySelector('.prev-slide');
    const nextButton = document.querySelector('.next-slide');
    let currentIndex = 0;

    function showSlide(index) {
        slides.forEach((slide, i) => {
            slide.classList.remove('active');
            if (i === index) {
                slide.classList.add('active');
            }
        });
    }

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

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

    nextButton.addEventListener('click', nextSlide);
    prevButton.addEventListener('click', prevSlide);

    // Automatisches Weiterschalten alle 5 Sekunden
    setInterval(nextSlide, 5000);
});

Erklärung des Codes

  • DOM-Auswahl: document.querySelectorAll und document.querySelector werden verwendet, um die relevanten Elemente (Folien und Steuerungsschaltflächen) auszuwählen.
  • showSlide-Funktion: Diese Funktion zeigt die aktuelle Folie an, indem sie die Klasse active hinzufügt und von den anderen Folien entfernt.
  • Navigation: Die Funktionen nextSlide und prevSlide ändern den currentIndex und rufen showSlide auf, um die richtige Folie anzuzeigen.
  • Event-Listener: addEventListener wird verwendet, um die Klickereignisse der Schaltflächen zu verarbeiten.
  • Automatische Wiedergabe: setInterval sorgt dafür, dass die Folien alle 5 Sekunden automatisch wechseln.

Related Posts

Scroll to Top