✔ suche eine pure css image slider also ohne js und ähnlichem

Ich hab mich jetzt am Original orientiert, den Code für 4 Bilder heruntergebrochen, und die Gesamtzeit der Animation auf 20s eingestellt. Das funktioniert einwandfrei, wie auch das vor- u. zurückblättern.

Dass bei dir zwischendrin das Blankimage erscheint, hängt mit den prozentualen @keyframes-Werten zusammen, die die Zeitpunkte der Animationssequenzen definieren, und in deinem Fall bei geringerer Bilderanzahl entsprechend aufzustocken sind.

Hier der relevante Auszug zum Abgleich:
CSS: 
.cssplay #img1:checked ~ *[id*="_01"]:not([id*="pse"]),
.cssplay #img2:checked ~ *[id*="_02"]:not([id*="pse"]),
.cssplay #img3:checked ~ *[id*="_03"]:not([id*="pse"]),
.cssplay #img4:checked ~ *[id*="_04"]:not([id*="pse"]) {z-index:100; opacity:1; visibility:visible;}

.cssplay #img1:checked ~ #bullets #bul_01,
.cssplay #img2:checked ~ #bullets #bul_02,
.cssplay #img3:checked ~ #bullets #bul_03,
.cssplay #img4:checked ~ #bullets #bul_04 {background:rgba(255,255,255,0.7);}

.cssplay #pause1:checked ~ *[id*="_01"]:not([id*="pse"]),
.cssplay #pause2:checked ~ *[id*="_02"]:not([id*="pse"]),
.cssplay #pause3:checked ~ *[id*="_03"]:not([id*="pse"]),
.cssplay #pause4:checked ~ *[id*="_04"]:not([id*="pse"]) {z-index:100; opacity:1; transition:0s; visibility:visible;}

.cssplay #pause1:checked ~ #bullets #bul_01,
.cssplay #pause2:checked ~ #bullets #bul_02,
.cssplay #pause3:checked ~ #bullets #bul_03,
.cssplay #pause4:checked ~ #bullets #bul_04 {background:rgba(255,255,255,0.7);}

.cssplay #play1:checked ~ *[id*="_01"]:not([id*="ply"]),
.cssplay #play2:checked ~ *[id*="_02"]:not([id*="ply"]),
.cssplay #play3:checked ~ *[id*="_03"]:not([id*="ply"]),
.cssplay #play4:checked ~ *[id*="_04"]:not([id*="ply"]) {transition:0s; -webkit-animation:autoplay0 20s infinite 0s; animation:autoplay0 20s infinite 0s;}

.cssplay #play1:checked ~ *[id*="_02"]:not([id*="ply"]),
.cssplay #play2:checked ~ *[id*="_03"]:not([id*="ply"]),
.cssplay #play3:checked ~ *[id*="_04"]:not([id*="ply"]),
.cssplay #play4:checked ~ *[id*="_01"]:not([id*="ply"]) {-webkit-animation:autoplay1 20s infinite 5s; animation:autoplay1 20s infinite 5s;}

.cssplay #play1:checked ~ *[id*="_03"]:not([id*="ply"]),
.cssplay #play2:checked ~ *[id*="_04"]:not([id*="ply"]),
.cssplay #play3:checked ~ *[id*="_01"]:not([id*="ply"]),
.cssplay #play4:checked ~ *[id*="_02"]:not([id*="ply"]) {-webkit-animation:autoplay1 20s infinite 10s; animation:autoplay1 20s infinite 10s;}

.cssplay #play1:checked ~ *[id*="_04"]:not([id*="ply"]),
.cssplay #play2:checked ~ *[id*="_01"]:not([id*="ply"]),
.cssplay #play3:checked ~ *[id*="_02"]:not([id*="ply"]),
.cssplay #play4:checked ~ *[id*="_03"]:not([id*="ply"]) {-webkit-animation:autoplay1 20s infinite 15s; animation:autoplay1 20s infinite 15s;}

@keyframes autoplay0 {
   0%,25% {z-index:100; opacity:1; visibility:visible;}
   27%,100% {z-index:-1; opacity:0; visibility:hidden;}
}

@keyframes autoplay1 {
   8%,25% {z-index:100; opacity:1; visibility:visible;}
   0%,27%,100% {z-index:-1; opacity:0; visibility:hidden;}
}

@-webkit-keyframes autoplay0 {
   0%,25% {z-index:100; opacity:1; visibility:visible;}
   27%,100% {z-index:-1; opacity:0; visibility:hidden;}
}

@-webkit-keyframes autoplay1 {
   8%,25% {z-index:100; opacity:1; visibility:visible;}
   0%,27%,100% {z-index:-1; opacity:0; visibility:hidden;}
}

.cssplay #play1:checked ~ #bullets #bul_01,
.cssplay #play2:checked ~ #bullets #bul_02,
.cssplay #play3:checked ~ #bullets #bul_03,
.cssplay #play4:checked ~ #bullets #bul_04 {transition:0s; -webkit-animation:bullet0 20s infinite 0s; animation:bullet0 20s infinite 0s;}

.cssplay #play1:checked ~ #bullets #bul_02,
.cssplay #play2:checked ~ #bullets #bul_03,
.cssplay #play3:checked ~ #bullets #bul_04,
.cssplay #play4:checked ~ #bullets #bul_01 {transition:0s; -webkit-animation:bullet1 20s infinite 5s; animation:bullet1 20s infinite 5s;}

.cssplay #play1:checked ~ #bullets #bul_03,
.cssplay #play2:checked ~ #bullets #bul_04,
.cssplay #play3:checked ~ #bullets #bul_01,
.cssplay #play4:checked ~ #bullets #bul_02 {transition:0s; -webkit-animation:bullet1 20s infinite 10s; animation:bullet1 20s infinite 10s;}

.cssplay #play1:checked ~ #bullets #bul_04,
.cssplay #play2:checked ~ #bullets #bul_01,
.cssplay #play3:checked ~ #bullets #bul_02,
.cssplay #play4:checked ~ #bullets #bul_03 {transition:0s; -webkit-animation:bullet1 20s infinite 15s; animation:bullet1 20s infinite 15s;}

@keyframes bullet0 {
   0%,25% {background:rgba(255,255,255,0.7);}
   27%,100% {background:rgba(0,0,0,0.7);}
}

@keyframes bullet1 {
   8%,25% {background:rgba(255,255,255,0.7);}
   0%,27%,100% {background:rgba(0,0,0,0.7);}
}

@-webkit-keyframes bullet0 {
   0%,25% {background:rgba(255,255,255,0.7);}
   27%,100% {background:rgba(0,0,0,0.7);}
}

@-webkit-keyframes bullet1 {
   8%,25% {background:rgba(255,255,255,0.7);}
   0%,27%,100% {background:rgba(0,0,0,0.7);}
}
[edit]Tipp-Ex[/edit]​
 
Zuletzt bearbeitet:
Wie bist du denn rechnerisch auf die Prozente bei den Key frames gekommen ich glaube nämlich das das mein Fehler War was ich morgen mal prüfen werde.

Danke aber erstmal für Deine Mühe und den Denkanstoß.
 
Original-CSS hat gesagt.:
CSS: 
@keyframes autoplay0 {
0%,10% {z-index:100; opacity:1; visibility:visible;}
12%,100% {z-index:-1; opacity:0; visibility:hidden;}
}

@keyframes autoplay1 {
2%,10% {z-index:100; opacity:1; visibility:visible;}
0%,12%,100% {z-index:-1; opacity:0; visibility:hidden;}
}
...
@keyframes bullet0 {
0%,10% {background:rgba(255,255,255,0.7);}
12%,100% {background:rgba(0,0,0,0.7);}
}

@keyframes bullet1 {
2%,10% {background:rgba(255,255,255,0.7);}
0%,12%,100% {background:rgba(0,0,0,0.7);}
}
Zum Vergrößern anklicken....
10 Bilder entsprechen hier im Original dem Wert 10% (10*10%=100%). Daraus ergibt sich 25% bei 4 Bildern :)

Die Differenz zwischen 10% und 12% habe ich frei übernommen, und auf 27% gesetzt.

Den ursprünglichen Wert 2% habe ich erhöht, bis die Überblendung gepasst hat :D
[edit]Tipp-Ex[/edit]​
 
Zuletzt bearbeitet:
Ja bei den 25% das hat mir schon eingeleuchtet nur die 8 und 27% eben nicht aber vielleicht ergibt die sich ja aus den Überblendungen von je 0.5 Sekunden na ich werde das meinem Script schon irgendwie beibringen.

Auf jeden Fall habe ich mit dir scheinbar meinen Weg gefunden.
 
:) *freu* OK der Fehler ist behoben. :)
Danke Danke Danke
Dann war da nur noch der Fehler mit dem (<label id="pre_0X...)
und da lief die Schleife in die falsche Richtung.

Vielen lieben Dank und ein schönen 3. Advent und Frohe Weihnachten.

Fertsch, wie der Sachse sagt.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück