CSS Slider ohne jQuery oder JavaScript – responsive

Über einen Slider für eine Bildergalerie nutzen wir nur HTML und reines CSS ohne jQuery und ohne JavaScript. Unsere erste Variante des Sliders soll automatisch nach definierter Zeit von einem Bild zum nächsten „rutschen“. Das englische Wort „slide“ bedeutet „rutschen, gleiten, gleiten lassen“. Wir basteln also auf gut Deutsch einen Bilder-Rutscher.

Dazu setzen wir reines CSS ein. Der Slider ist sehr einfach aufgebaut, damit das Prizinzip dahinter sichtbar wird. Diese Art funktioniert hervorragend bei einer definierten Anzahl an Bildern.

Katzenbilder sind immer von Vorteil (das Internet besteht ja quasi zu 50% daraus):

unser Katzen-Bilder-CSS-Slider — Fotos für unseren Katzen-Bilder-CSS-Slider

Aus diesen Fotos wird der Slider, in dem automatisch animiert die Bilder wechseln:

Die im Tutorial verwendeten Bilder können zu Testzwecken hier herunter geladen werden (rechts Maustaste und speichern unter wählen):

Um den Ablauf besser verstehen zu können, verwenden wir erst verkleinerte Versionen der Bilder (Schärfe und Qualität ist in dem Schritt nicht wichtig). Am Ende können wir die Bilder dann durch die Qualitätiv hochwerten mit der großen Auflösung ersetzen. Die 200 Pixel breiten Versionen gibt es hier (rechts Maustaste und speichern unter wählen):

Wir benötigen als ersten unser HTML-Code, in dem wir unsere 5 Bilder unterbringen. Hier bieten sich die typischen HTML-Tags <figure>, <img …> und <figcaption>

<figure>
    <img src="bilder/katzen-2-schlafen-8931-200.jpg" alt="schlafende Katzen">
    <figcaption>Schönheitschlaf</figcaption>
</figure>
<figure>
    <img src="bilder/katzen-gimme-5-8873-200.jpg" alt="gimme 5">
    <figcaption>gimme 5</figcaption>
</figure>
<figure>
    <img src="bilder/katzen-tuscheln-8762-200.jpg" alt="ich habe gehört">
    <figcaption>ich habe gehört</figcaption>
</figure>
<figure>
    <img src="bilder/katzen-ich-pass-da-rein-8807-200.jpg" alt="ich pass da rein">
    <figcaption>ich pass da rein</figcaption>
</figure>
<figure>
    <img src="bilder/katzen-was-geht-da-unten-8756-200.jpg" alt="wer bist du denn?">
    <figcaption>wer bist du denn?</figcaption>
</figure>

Die Bilder kommen nun untereinander.

für unseren Slider wollen wir die Bilder nebeneinander. Allerdings sollen wir im ersten Schritt in unserem CSS die Innen- und Außenabstände auf 0 setzen und für das Box-Model box-sizing: content-box festlegen, um keine Überraschungen im Design zu erleben:

* {
    box-sizing: content-box;
    margin: 0;
    padding: 0;
}

Wir benötigen im HTML einen Bereich, in dem unsere Bilder liegen:

<div class="bildergalerie_slider_alle_slides">
    <figure>
        <img src="bilder/katzen-2-schlafen-8931-200.jpg" alt="schlafende Katzen">
        <figcaption>Schönheitschlaf</figcaption>
    </figure>
    <figure>
        <img src="bilder/katzen-gimme-5-8873-200.jpg" alt="gimme 5">
        <figcaption>gimme 5</figcaption>
    </figure>
    <figure>
        <img src="bilder/katzen-tuscheln-8762-200.jpg" alt="ich habe gehört">
        <figcaption>ich habe gehört</figcaption>
    </figure>
    <figure>
        <img src="bilder/katzen-ich-pass-da-rein-8807-200.jpg" alt="ich pass da rein">
        <figcaption>ich pass da rein</figcaption>
    </figure>
    <figure>
        <img src="bilder/katzen-was-geht-da-unten-8756-200.jpg" alt="wer bist du denn?">
        <figcaption>wer bist du denn?</figcaption>
    </figure>
</div>

Diesen Bereich geben wir eine Hintergrundfarbe „yellowgreen“ und geben eine Breite. Wir verwenden 5 Bilder, also benötigt unsere Slider 500% Breite unseres Browserfensters. Wir legen einen Bereich von 300 Pixel Höhe fest:

.bildergalerie_slider_alle_slides {
    width: 500%;
    height: 300px;
    background-color: hsla(80, 61%, 50%, 0.73);
}

Jetzt sehen wir unsere Bilder noch untereinander, aber bereits den vorgesehenen Raum für unseren Bilder-Slider.

Damit die Bilder nebeneinander kommen, bekommen diese die Eigenschaft float: left;. Man könnte auch mit display: inline-block; arbeiten, was die Sache umständlich macht, da Leerstellen im HTML-Code zwischen den einzelnen Bildern auch zu Abständen führten und dann die Breite nicht ausreicht und Umbrüche auftauchen. Also einfach halten:

.bildergalerie_slider_alle_slides figure {
    float: left;
}

Unsere Bilder werden nun nebeneinander angezeigt:

unsere Bilder für den Slider nebeneinander

Jedes unser Bilder soll die komplette Browserfensterbreite einnehmen. Dazu verwenden wir die Breitenangabe mit der Maßeinheit „vw“. Diese steht für die Viewport-Breite („Viewport-Width“). Eine Breite von 100vw bedeutet, dass unser Bild die komplette Breite des Browserfensters nutzt. Dazu nutzen wir als Selektor „.bildergalerie_slider_alle_slides figure img“ – also alle Bilder Bilder (img) innerhalb der Bildbereichs (figure) die in der Klasse „.bildergalerie_slider_alle_slides“ stecken:

.bildergalerie_slider_alle_slides figure img {
    width: 100vw;
    height: 300px;
}

Unsere Bilder werden nun gestaucht aber auf der kompletten Fensterbreite angezeigt:

Bild über komplette Fenterbreite, aber gestaucht

Um die Stauchung zu beseiten, geben wir die CSS-Anweisung object-fit: cover; mit:

.bildergalerie_slider_alle_slides figure img {
    width: 100vw;
    height: 300px;
    object-fit: cover;
}

Die Stauchung verschwindet und die Bilder werden mittig ausgerichtet:

Ohne Stauchung in der Mitte ausgerichtet

Automatisches Scrollen aktivieren für CSS-Slider

Jetzt wollen wir durch unseren Slider automatisch scrollen lassen. Dazu müssen wir unseren Bereich „.bildergalerie_slider_alle_slides“ die Eigenschaft position: relative; mitgeben und eine Animation starten über animation: 20s slideranimation infinite;

.bildergalerie_slider_alle_slides {
    width: 500%;
    height: 300px;
    background-color: hsla(80, 61%, 50%, 0.73);

    position: relative;    
    animation: 20s slideranimation infinite;
}

Bei der Animation selber ändern wir die linke Position über left: …px;.

Da wir 5 Bilder haben, wollen wir im ersten Schritt 5 Positionen ansprechen (das wird sich später noch ändern damit die Animation rund wird).

@keyframes slideranimation {
    0% {
        left: 0;
    }

    15% {
        left: 0;
    }

    20% {
        left: -100%;
    }

    35% {
        left: -100%;
    }

    40% {
        left: -200%;
    }

    55% {
        left: -200%;
    }

    60% {
        left: -300%;
    }

    75% {
        left: -300%;
    }

    80% {
        left: -400%;
    }

    100% {
        left: -400%;
    }
}

Nun sollte die Animation beim Aufruf der Website automatisch starten. Allerdings wird nach dem letzten Bild sehr ruppig auf das erste Bild zurückgesprungen. Hier kommt ein Kniff zum Zuge. Wir erstellen einen weitere Animationsschritt am Ende, an dem wir das Anfangsbild wieder einfügen. Dazu müssen wir sowohl CSS wie auch HTML anfassen:

Ein weiterer Animationsschritt:

@keyframes slideranimation {
    0% {
        left: 0;
    }

    15% {
        left: 0;
    }

    20% {
        left: -100%;
    }

    35% {
        left: -100%;
    }

    40% {
        left: -200%;
    }

    55% {
        left: -200%;
    }

    60% {
        left: -300%;
    }

    75% {
        left: -300%;
    }

    80% {
        left: -400%;
    }

    95% {
        left: -400%;
    }

    100% {
        left: -500%;
    }
}

Und unser HTML-Code:

<div class="bildergalerie_slider">
    <div class="bildergalerie_slider_alle_slides">
        <figure><img src="bilder/katzen-2-schlafen-8931-200.jpg" alt="schlafende Katzen">
            <figcaption>Schönheitschlaf</figcaption>
        </figure>
        <figure><img src="bilder/katzen-gimme-5-8873-200.jpg" alt="gimme 5">
            <figcaption>gimme 5</figcaption>
        </figure>
        <figure>
            <img src="bilder/katzen-tuscheln-8762-200.jpg" alt="ich habe gehört">
            <figcaption>ich habe gehört</figcaption>
        </figure>
        <figure>
            <img src="bilder/katzen-ich-pass-da-rein-8807-200.jpg" alt="ich pass da rein">
            <figcaption>ich pass da rein</figcaption>
        </figure>
        <figure>
            <img src="bilder/katzen-was-geht-da-unten-8756-200.jpg" alt="wer bist du denn?">
            <figcaption>wer bist du denn?</figcaption>
        </figure>

        <!-- erweiterung für Trick bei Animation -->
        <figure><img src="bilder/katzen-2-schlafen-8931-200.jpg" alt="schlafende Katzen">
            <figcaption>Schönheitschlaf</figcaption>
        </figure>
    </div>
</div>

Nun läuft unsere Animation auch nach dem letzten Bild sauber weiter, wenn wir die Breite der Anzeigefläche von 500% auf 600% ändern:

.bildergalerie_slider_alle_slides {
    width: 600%;

Schönheitsfehler Browserfenster kann nach rechts geschoben werden

Es gibt noch einen Schönheitsfehler. Das Browserfenster kann nach rechts verschoben werden. Das liegt an unseren Breitenangabe von 600%. Diese benötigen wir aber für die Animation. Also stecken wir unseren Slider-Bereich einfach in ein DIV, bei dem alles Breite ausgeblendet wird über overflow: hidden;

/* um scrollen nach rechts zu unterbinden */
.bildergalerie_slider {
    overflow: hidden;
}

Bildunterschriften über Bilder einblenden

Unsere Bildunterschriften sollen noch schön über die Bilder geblendet werden. Dazu müssen wir das Elternelement relativ setzen über position: relative;

.bildergalerie_slider_alle_slides figure {
    position: relative;
    float: left;
}

Und unsere Gegenstück bei figcaption wird absolut gesetzt über position: absolute; - im folgenden gleich mit entsprechende Effekt ala Bauchbinde, was man auf dem Fernsehen kennt:

figcaption {
    position: absolute;
    top: 200px;
    left: 0;
    background-color: hsla(0, 100%, 100%, 0.6);

    font-family: sans-serif;
    font-size: 2em;
    padding: .2em 1em;

    border-top-right-radius: .5em;
    border-bottom-right-radius: .5em;    

    color: white;
    text-shadow: 2px 2px 1px black;
    text-shadow: 1px 1px 1px black;    
}

Somit haben wir unseren komplette CSS-Slider umgesetzt. Jetzt noch die Qualitativen Bilder genutzt und unter Umständen bei einzelnen Bildern diese anderes Positioniert über object-position: und wir haben eine coole Animation und einen typischen CSS-Slider.

Beispiel für das Positionieren:

.bildergalerie_slider_alle_slides figure:nth-child(1) img,
.bildergalerie_slider_alle_slides figure:nth-child(5) img {
    object-position: center;       
}        

.bildergalerie_slider_alle_slides figure:nth-child(2) img,
.bildergalerie_slider_alle_slides figure:nth-child(3) img,         
.bildergalerie_slider_alle_slides figure:nth-child(4) img {
    object-position: center 20%;       
}

kompletter Code für den CSS-Slider

Der komplette Code für den CSS-Slider

Mit der niedrigen Auflösung:

<style>
* {
    box-sizing: content-box;
    margin: 0;
    padding: 0;
}

/* um scrollen nach rechts zu unterbinden */
.bildergalerie_slider {
    overflow: hidden;
}        

.bildergalerie_slider_alle_slides {
    width: 600%;
    height: 300px;
    /* background-color: hsla(80, 61%, 50%, 0.73);*/
    position: relative;    
    animation: 20s slideranimation infinite;
}

@keyframes slideranimation {
    0% {
        left: 0;
    }

    15% {
        left: 0;
    }

    20% {
        left: -100%;
    }

    35% {
        left: -100%;
    }

    40% {
        left: -200%;
    }

    55% {
        left: -200%;
    }

    60% {
        left: -300%;
    }

    75% {
        left: -300%;
    }

    80% {
        left: -400%;
    }

    95% {
        left: -400%;
    }

    100% {
        left: -500%;
    }
}        

.bildergalerie_slider_alle_slides figure {
    position: relative;
    float: left;
}

.bildergalerie_slider_alle_slides figure img {
    width: 100vw;
    height: 300px;
    object-fit: cover;
}

.bildergalerie_slider_alle_slides figure:nth-child(1) img,
.bildergalerie_slider_alle_slides figure:nth-child(5) img {
    object-position: center;       
}        

.bildergalerie_slider_alle_slides figure:nth-child(2) img,
.bildergalerie_slider_alle_slides figure:nth-child(3) img,         
.bildergalerie_slider_alle_slides figure:nth-child(4) img {
    object-position: center 20%;       
}        

figcaption {
    position: absolute;
    top: 200px;
    left: 0;
    background-color: hsla(0, 100%, 100%, 0.6);

    font-family: sans-serif;
    font-size: 2em;
    padding: .2em 1em;

    border-top-right-radius: .5em;
    border-bottom-right-radius: .5em;    

    color: white;
    text-shadow: 2px 2px 1px black;
    text-shadow: 1px 1px 1px black;    
}    
</style>

<div class="bildergalerie_slider">
    <div class="bildergalerie_slider_alle_slides">
        <figure><img src="bilder/katzen-2-schlafen-8931-200.jpg" alt="schlafende Katzen">
            <figcaption>Schönheitschlaf</figcaption>
        </figure>
        <figure><img src="bilder/katzen-gimme-5-8873-200.jpg" alt="gimme 5">
            <figcaption>gimme 5</figcaption>
        </figure>
        <figure>
            <img src="bilder/katzen-tuscheln-8762-200.jpg" alt="ich habe gehört">
            <figcaption>ich habe gehört</figcaption>
        </figure>
        <figure>
            <img src="bilder/katzen-ich-pass-da-rein-8807-200.jpg" alt="ich pass da rein">
            <figcaption>ich pass da rein</figcaption>
        </figure>
        <figure>
            <img src="bilder/katzen-was-geht-da-unten-8756-200.jpg" alt="wer bist du denn?">
            <figcaption>wer bist du denn?</figcaption>
        </figure>

        <!-- erweiterung für Trick bei Animation -->
        <figure><img src="bilder/katzen-2-schlafen-8931-200.jpg" alt="schlafende Katzen">
            <figcaption>Schönheitschlaf</figcaption>
        </figure>
    </div>
</div>

Und mit der hohen Auflösung:

<style>
* {
    box-sizing: content-box;
    margin: 0;
    padding: 0;
}

/* um scrollen nach rechts zu unterbinden */
.bildergalerie_slider {
    overflow: hidden;
}        

.bildergalerie_slider_alle_slides {
    width: 600%;
    height: 300px;
    /* background-color: hsla(80, 61%, 50%, 0.73);*/
    position: relative;    
    animation: 20s slideranimation infinite;
}

@keyframes slideranimation {
    0% {
        left: 0;
    }

    15% {
        left: 0;
    }

    20% {
        left: -100%;
    }

    35% {
        left: -100%;
    }

    40% {
        left: -200%;
    }

    55% {
        left: -200%;
    }

    60% {
        left: -300%;
    }

    75% {
        left: -300%;
    }

    80% {
        left: -400%;
    }

    95% {
        left: -400%;
    }

    100% {
        left: -500%;
    }
}        

.bildergalerie_slider_alle_slides figure {
    position: relative;
    float: left;
}

.bildergalerie_slider_alle_slides figure img {
    width: 100vw;
    height: 300px;
    object-fit: cover;
}

.bildergalerie_slider_alle_slides figure:nth-child(1) img,
.bildergalerie_slider_alle_slides figure:nth-child(5) img {
    object-position: center;       
}        

.bildergalerie_slider_alle_slides figure:nth-child(2) img,
.bildergalerie_slider_alle_slides figure:nth-child(3) img,         
.bildergalerie_slider_alle_slides figure:nth-child(4) img {
    object-position: center 20%;       
}        

figcaption {
    position: absolute;
    top: 200px;
    left: 0;
    background-color: hsla(0, 100%, 100%, 0.6);

    font-family: sans-serif;
    font-size: 2em;
    padding: .2em 1em;

    border-top-right-radius: .5em;
    border-bottom-right-radius: .5em;    

    color: white;
    text-shadow: 2px 2px 1px black;
    text-shadow: 1px 1px 1px black;    
}    
</style>

<div class="bildergalerie_slider">
    <div class="bildergalerie_slider_alle_slides">
        <figure><img src="bilder/katzen-2-schlafen-8931.jpg" alt="schlafende Katzen">
            <figcaption>Schönheitschlaf</figcaption>
        </figure>
        <figure><img src="bilder/katzen-gimme-5-8873.jpg" alt="gimme 5">
            <figcaption>gimme 5</figcaption>
        </figure>
        <figure>
            <img src="bilder/katzen-tuscheln-8762.jpg" alt="ich habe gehört">
            <figcaption>ich habe gehört</figcaption>
        </figure>
        <figure>
            <img src="bilder/katzen-ich-pass-da-rein-8807.jpg" alt="ich pass da rein">
            <figcaption>ich pass da rein</figcaption>
        </figure>
        <figure>
            <img src="bilder/katzen-was-geht-da-unten-8756.jpg" alt="wer bist du denn?">
            <figcaption>wer bist du denn?</figcaption>
        </figure>

        <!-- erweiterung für Trick bei Animation -->
        <figure><img src="bilder/katzen-2-schlafen-8931.jpg" alt="schlafende Katzen">
            <figcaption>Schönheitschlaf</figcaption>
        </figure>
    </div>
</div>

Weiterempfehlen • Social Bookmarks • Vielen Dank

img-Bilder mit CSS einpassen - object-fit: absolute Positionierung

Bitte unterstützen

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Vielen Dank für Ihre Hilfe

E-Books zum Kurs
von HTML-Seminar.de
E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

Mehr Details