Slideshow mit CSS3 soll selbstständig stoppen und fortfahren

Question

Hi Leute,

ich habe mit Hilfe von CSS3 eine Slideshow gebastelt, welcher ich ungefähr in der Mitte anhelten und nach 10s fortsetzen will. Gibt es hier eine Möglichkeit, das ohne JS zu realisieren? Ich bekomme es einfach nicht hin. Er fängt an, wie er soll, stoppt für vielleicht 0.5s und geht dann weiter.

Der Quellcode sieht so aus:

            div.slideshow_headline {

                width: fit-content;

                animation: slideshow 5s ease-in-out 0s infinite;

                border:0px solid #000;

            }

            h2.slideshow_headline {

                position: absolute;

                opacity: 0;

                animation: slideshow 5s ease-in-out 0s infinite;

                border:1px solid #000;

            }

            div.slideshow_headline h2:nth-child(1) {

                animation-delay: 0s;

            }

            div.slideshow_headline h2:nth-child(2) {

                animation-delay: 10s;

            }

            div.slideshow_headline h2:nth-child(3) {

                animation-delay: 20s;

            }

            @keyframes slideshow {

                0% {

                    right: 0;

                    opacity: 0;

                }

                25% {

                    opacity: 1;

                }

                50% {

                    right: 50%;

                    opacity: 1;

                }

                75% {

                    opacity: 1;

                }

                100% {

                    right: 100%;

                    opacity: 0;

                }

            }

...

            <div class="slideshow_headline">

                <h2 class="slideshow_headline">Headline1</h2>

                <h2 class="slideshow_headline">Headline2</h2>

                <h2 class="slideshow_headline">Headline3</h2>

            </div>

Vielen Dank für die Hilfe.

Schönen Sonntag noch

Answer 1

Hallo,
ohne eine Skriptsprache wird dein Vorhaben nicht funktionieren.
Schau mal hier, vielleicht hilft dir das weiter.
https://praxistipps.chip.de/slideshow-mit-html-erstellen-diese-varianten-gibts_30234
https://www.mediaevent.de/javascript/simple-lightbox.html
https://www.w3schools.com/howto/howto_js_slideshow.asp

MfG Kody

Answer 2

persönliche Empfehlung: lass solche "Spielereien" sein. Investiere lieber die Zeit in Barrierefreiheit.

Answer 3

Hey,

ihr beiden habt ja recht. Ehrlich gesagt war das mit den "Spielereien" schon gewollt. Ich sehe aber ein, dass ich so nicht weiterkomme. Dann muss ich wohl doch JavaScript bemühen.

Danke erstmal.

Answer 4

Ich habe eine Lösung ohne JavaScript gefunden.

Einfach, aber für meine Zwecke ausreichend:

            .animate {

                position: absolute;

                animation: animate 8s ease-out infinite;

            }

            @keyframes animate {

                0% {

                    left: 100%;

                    opacity: 0;

                }

                50%, 80% {

                    left: 35%;

                    opacity: 1;

                }

                100% {

                    left: 0;

                    opacity: 0;

                }

            }

...

        <div>

            <img loading="lazy" class="animate" src="xxx">

            <img loading="lazy" class="animate" src="xxx2">

            <img loading="lazy" class="animate" src="xxx3">

        </div>

Die Animation wird jetzt für ca. 5 Sekunden in der Mitte gestoppt und setzt sich dann automatisch fort.