Endloser Bild-Slider nur mit HTML und CSS – So erstellst du einen ressourcenschonenden Slider

Lesezeit: ca. 3 Minuten

HTML CSS endloser Bild-Slider – Anleitung für einen ressourcenschonenden Slider

Möchtest du einen endlosen Bild-Slider erstellen, der ohne JavaScript auskommt und somit besonders ressourcenschonend ist? In diesem Beitrag zeigen wir dir, wie du mit reinem HTML und CSS einen solchen Slider umsetzt. Diese Methode eignet sich hervorragend für Projekte, die auf zusätzliche Frameworks oder Skripte verzichten möchten.

Warum einen Slider nur mit HTML und CSS erstellen?

Ein Slider, der ausschließlich mit HTML und CSS realisiert wird, bietet mehrere Vorteile:

• Performance: Keine zusätzlichen Skripte bedeuten schnellere Ladezeiten.

• Kompatibilität: Funktioniert in allen modernen Browsern ohne Abhängigkeiten.

• Einfachheit: Leicht zu implementieren und zu warten.

Schritt-für-Schritt-Anleitung für einen endlosen Bild-Slider

1️⃣ HTML-Struktur erstellen

Zunächst benötigen wir eine Container-Div mit der Klasse marquee, die den sichtbaren Bereich des Sliders definiert. Innerhalb dieser Div platzieren wir eine weitere Div mit der Klasse marquee-content, die alle Bilder enthält. Um den endlosen Effekt zu erzielen, duplizieren wir den Inhalt von marquee-content.

<div class="marquee">
    <div class="marquee-content">
        <!-- Originaler Inhalt -->
        <div class="slide"><img src="bild1.jpg" alt="Bild 1"></div>
        <div class="slide"><img src="bild2.jpg" alt="Bild 2"></div>
        <div class="slide"><img src="bild3.jpg" alt="Bild 3"></div>
        <!-- Duplizierter Inhalt für nahtlosen Effekt -->
        <div class="slide"><img src="bild1.jpg" alt="Bild 1"></div>
        <div class="slide"><img src="bild2.jpg" alt="Bild 2"></div>
        <div class="slide"><img src="bild3.jpg" alt="Bild 3"></div>
    </div>
</div>

Hier ist ein dynamisches Beispiel für das Gerüst mit ACF-Feldern:

<div class="marquee">
    <div class="marquee-content">
        <?php
        foreach( get_field( 'gallery', 'option' ) as $image ){
            echo sprintf( '<div class="slide"><img src="%s" alt="%s"/></div>',
                wp_get_attachment_image_url( $image, $size = 'large', $icon = false ),
                wp_get_attachment_caption( $image )
            );
        }
        ?>
 
        <!-- Duplizierter Inhalt für nahtlosen Effekt -->
        <?php
        foreach( get_field( 'gallery', 'option' ) as $image ){
            echo sprintf( '<div class="slide"><img src="%s" alt="%s"/></div>',
                wp_get_attachment_image_url( $image, $size = 'large', $icon = false ),
                wp_get_attachment_caption( $image )
            );
        }
        ?>
    </div>
</div>

2️⃣ CSS für den Slider

Nun definieren wir das Styling für den Slider und die Animation:

.marquee {
    overflow: hidden;
    width: 100%;
    margin-top: 20px;
}

.marquee-content {
    display: flex;
    animation: marquee 20s linear infinite;
    width: max-content;
}

.slide img {
    height: 150px;
    margin-right: 20px;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

➡ Erklärung:

• .marquee: Versteckt den überlaufenden Inhalt und setzt die Breite auf 100%.

• .marquee-content: Nutzt Flexbox für die horizontale Anordnung der Bilder und animiert die Bewegung.

• .slide img: Setzt die Höhe der Bilder und den Abstand zwischen ihnen.

• @keyframes marquee: Definiert die Animation, die den Inhalt von rechts nach links bewegt.

Mit dieser Methode kannst du einen endlosen Bild-Slider erstellen, der komplett ohne JavaScript auskommt. Dies führt zu einer verbesserten Performance und einer einfacheren Wartung deiner Website. Probiere es aus und integriere einen solchen Slider in dein nächstes Projekt!