Slideshow Banner-Komponente

Slideshow Banner-Komponente

In diesem Artikel möchte ich die Entwicklung einer Slideshow Banner-Komponente erläutern, die sowohl für Desktop- als auch für Mobilgeräte optimiert ist. Der Fokus liegt auf den wesentlichen Aspekten des JavaScript- und CSS-Codes, um eine flüssige und benutzerfreundliche Banner-Darstellung zu gewährleisten.


Überblick

Die Slideshow Banner-Komponente besteht aus mehreren Bildbannern, die nacheinander eingeblendet werden. Diese Banner können für verschiedene Zwecke wie Werbung, Promotionen oder andere visuelle Inhalte genutzt werden. Die Komponente wird durch HTML, CSS und JavaScript realisiert, wobei das wichtigste Augenmerk auf der dynamischen Bildanzeige und der responsiven Gestaltung liegt.

HTML-Struktur

Die Struktur der Slideshow besteht aus einem Container-Div mit der Klasse .banner-container, das jeweils ein weiteres Div-Element mit der Klasse .banner-images enthält, in dem die Bilder abgelegt sind. Jeder Banner besteht aus mehreren Bildern, die hintereinander angezeigt werden. Diese Bilder werden durch das CSS so formatiert, dass sie sich horizontal nebeneinander anordnen und innerhalb des Containers angezeigt werden.

<div class="banner-container">
    <div class="banner-images">
        <img src="https://example.com/image1.jpg" alt="Slide 1">
        <img src="https://example.com/image2.jpg" alt="Slide 2">
    </div>
</div>

CSS-Design

Container-Styling

Der .banner-container-Div ist das Hauptelement, das den gesamten Bannerbereich enthält. Der Container hat eine feste Breite von 60% der verfügbaren Bildschirmbreite, was ihn sowohl auf größeren als auch auf kleineren Bildschirmen gut sichtbar macht. Zusätzlich wird der Container zentriert und mit einem doppelten Rand versehen, um einen eleganten visuellen Effekt zu erzielen.

.banner-container {
    width: 60%;
    margin: 0 auto 20px;
    overflow: hidden;
    position: relative;
    border: 5px double black;
    box-sizing: border-box;
}

Flexbox für die Bildanordnung

Innerhalb des Containers werden die Bilder mit Hilfe von Flexbox angeordnet. Dies ermöglicht eine einfache horizontale Ausrichtung der Bilder. Die display: flex;-Eigenschaft sorgt dafür, dass die Bilder nebeneinander angezeigt werden, und transition: transform 1s ease-in-out; sorgt für eine sanfte Übergangsanimation, wenn zwischen den Bildern gewechselt wird.

.banner-images {
    display: flex;
    transition: transform 1s ease-in-out;
}

.banner-images img {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}

Responsivität

Für kleinere Bildschirme (maximal 768px Breite) sorgt eine Medienabfrage dafür, dass die Banner den gesamten Bildschirm ausfüllen. Dies stellt sicher, dass die Komponente auf mobilen Geräten genauso gut aussieht wie auf Desktop-Computern.

@media (max-width: 768px) {
    .banner-container {
        width: 100%;
    }
}

JavaScript: Automatisierung der Bildumschaltung

Die JavaScript-Funktion sorgt dafür, dass die Slideshow automatisch alle 5 Sekunden das nächste Bild anzeigt. Die Bilder werden in einem Array von DOM-Elementen gespeichert, und der transform-Stil des Containers wird regelmäßig aktualisiert, um die Bilder nach links zu verschieben.

Funktionsweise der Bildumschaltung

  • Selektoren: Wir wählen alle Banner-Container aus und greifen auf die Bilder im Inneren des Containers zu.
  • Indexverwaltung: Ein Index zählt die aktuelle Bildposition. Wenn der Index das Ende der Bildliste erreicht, wird er wieder auf Null zurückgesetzt.
  • Transformationssteuerung: Die CSS-transform-Eigenschaft wird genutzt, um das Banner nach links zu verschieben und so das nächste Bild anzuzeigen.
document.querySelectorAll('.banner-container').forEach((container) => {
    const bannerImages = container.querySelector('.banner-images');
    const images = container.querySelectorAll('.banner-images img');
    let index = 0;

    function slideImages() {
        index++;
        if (index >= images.length) {
            index = 0;
        }
        bannerImages.style.transform = `translateX(${-index * 100}%)`;
    }

    setInterval(slideImages, 5000); // Bildwechsel alle 5 Sekunden
});

Erklärung des JavaScript-Codes

  • setInterval(slideImages, 5000);: Diese Funktion sorgt dafür, dass alle 5 Sekunden die slideImages-Funktion aufgerufen wird, die den Index der aktuellen Folie erhöht und das Bild nach links verschiebt.
  • transform: translateX(${-index * 100}%): Diese Zeile sorgt dafür, dass der Banner-Container je nach aktuellem Index des Bildes verschoben wird, sodass das jeweilige Bild in den Vordergrund tritt.

Fazit

Die Slideshow Banner-Komponente bietet eine einfache und effektive Möglichkeit, mehrere Bilder in einem Web-Layout anzuzeigen. Durch die Kombination von CSS für das Layout und JavaScript für die dynamische Bildumschaltung wird eine ansprechende, benutzerfreundliche Lösung geschaffen, die auf verschiedenen Geräten gut funktioniert. Mit einer Breitenanpassung und flexiblen Bildgrößen ist die Komponente sowohl für Desktop- als auch für Mobilgeräte optimiert.

Scroll to Top