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

Grafixboy

Grafixboy

Erfahrenes Mitglied
Hallo,

wünsch euch erstmal vorab eine schöne Adventszeit.

ich suche einen fertigen Image Slider (Codeschnipsel / Codesnippets)
mit folgenden Grund-Funktionen den Rest erweitere ich selbst.
Ich habe schon viel gesucht und gefunden aber leider war noch nix brauchbares dabei.
Vielleicht habt ihr eine gute Quelle.​

  • er soll ohne Javascript auskommen also nur aus purem CSS und HTML bestehen
  • autoplay funktion
  • Platz 3-7 Container / Bilder bieten
  • und ein manuelles weiterslider ermöglichen
Viele liebe Grüße Grafixboy :)
 
Vielen Dank SpiceLab das sieht doch sehr gut aus was der Stu da gebaut hat muss es nur noch so umbasteln das es wenn man mit der Maus im playmodus über die Bilder fährt anhält und beim verlassen den Playmodus fortsetzt.

Auch dir Danke djheke ich werde mir das mal anschauen.
 
Hallihallo nochmal hatte mich dann für die variante vom Stu entschieden.
Habe auch schon alles an meine Wünsche angepasst und lasse die Bilder aus der Datenbank importieren.
Und erstelle je nach anzahl der Bilder dyn. mein css und die entsprechenden HTML-Elemenete die dafür,
notwendig sind.
Leider habe ich noch ein Problem mit den Transitions.
CSS: 
/*gekürzte Inhalte*/
{transition:0s; -webkit-animation:autoplay0 50s infinite  0s; animation:autoplay0 50s infinite  0s;}
           {-webkit-animation:autoplay1 50s infinite  5s; animation:autoplay1 50s infinite  5s;}
               {-webkit-animation:autoplay1 50s infinite 10s; animation:autoplay1 50s infinite 10s;}
               {-webkit-animation:autoplay1 50s infinite 15s; animation:autoplay1 50s infinite 15s;}
               {-webkit-animation:autoplay1 50s infinite 20s; animation:autoplay1 50s infinite 20s;}
               {-webkit-animation:autoplay1 50s infinite 25s; animation:autoplay1 50s infinite 25s;}
               {-webkit-animation:autoplay1 50s infinite 30s; animation:autoplay1 50s infinite 30s;}
               {-webkit-animation:autoplay1 50s infinite 35s; animation:autoplay1 50s infinite 35s;}
               {-webkit-animation:autoplay1 50s infinite 40s; animation:autoplay1 50s infinite 40s;}
               {-webkit-animation:autoplay1 50s infinite 45s; animation:autoplay1 50s infinite 45s;}

{transition:0s; -webkit-animation:bullet0 50s infinite  0s; animation:bullet0 50s infinite  0s;}
{transition:0s; -webkit-animation:bullet1 50s infinite  5s; animation:bullet1 50s infinite  5s;}
{transition:0s; -webkit-animation:bullet1 50s infinite 10s; animation:bullet1 50s infinite 10s;}
{transition:0s; -webkit-animation:bullet1 50s infinite 15s; animation:bullet1 50s infinite 15s;}
{transition:0s; -webkit-animation:bullet1 50s infinite 20s; animation:bullet1 50s infinite 20s;}
{transition:0s; -webkit-animation:bullet1 50s infinite 25s; animation:bullet1 50s infinite 25s;}
{transition:0s; -webkit-animation:bullet1 50s infinite 30s; animation:bullet1 50s infinite 30s;}
{transition:0s; -webkit-animation:bullet1 50s infinite 35s; animation:bullet1 50s infinite 35s;}
{transition:0s; -webkit-animation:bullet1 50s infinite 40s; animation:bullet1 50s infinite 40s;}
{transition:0s; -webkit-animation:bullet1 50s infinite 45s; animation:bullet1 50s infinite 45s;}

Da es sich bei stu's image slider ja um 10 Bilder handelt sind die 50s gut nachvollziehbar.
10 Bilder jedes wird 5sekunden angezeigt.

Also wenn ich nun 4 Bilder habe müste es nach Max & Moritz 20s bei 5 sekunden anzeige sein.

Wenn ich das aber so einstelle switcht er mir zwischen Bildern hin und her soll Heißen:
fade zu Bild1, fade zu Blankimage, fade zu Bild2, fade zu Blankimage und so weiter . . .

Nur sollte das Blankimage eigendelich nie zu sehen sein.

Ich hoffe ihr konntet mich verstehen.

Ach ja um folgende Gallery handelt es sich.
http://www.cssplay.co.uk/menu/cssplay-auto-play-gallery.html
 
Obiger CSS-Auszug stammt aus dem Original.

Ist deine Seite online verfügbar? Andernfalls poste bitte mal den (geparsten) HTML-Code und das Stylesheet.
[edit]Tipp-Ex[/edit]​
 
Zuletzt bearbeitet:
CSS: 
<!--Bannerrotation Start-->
<style> body{margin:0px;}
.cssplay {width:100%; max-width:1180px; position:relative; z-index:100; margin:0px auto; padding-bottom:50px;}
.cssplay #blank {display:block; height:245px; width:100%; background:#dcd7c4; display:hidden;}
.cssplay input {position:absolute; left:-9999px; display:none;}
.cssplay *[id*="pic"] {display:block; position:absolute; left:0; top:0; width:100%; z-index:-1; opacity:0; transition:1s; -webkit-transition:1s;}
.cssplay *[id*="cap"] {display:block; font:normal 14px/25px 'texgyreadventorregular',arial,sans-serif; color:#fff; padding:5px 15px; text-align:left; position:absolute; bottom:100px; right:55px; z-index:-1; background:rgba(0,145,220,0.8);}
.cssplay *[id*="pre"] {display:block; position:absolute; width:40px; height:40px; text-align:center; left:0;   border:1px solid #fff; border-radius: 0px 40px 40px 0px;                      bottom:180px; z-index:-1; font:normal 40px/40px 'playerregular'; cursor:pointer; visibility:hidden;line-height:32px;background:#0091dc;color:#fff;}
.cssplay *[id*="nxt"] {display:block; position:absolute; width:40px; height:40px; text-align:center; right:0;  border:1px solid #fff; border-radius: 40px 0px 0px 40px;                   bottom:180px; z-index:-1; font:normal 40px/40px 'playerregular'; cursor:pointer; visibility:hidden;line-height:32px;background:#0091dc;color:#fff;}
.cssplay *[id*="ply"] {display:block; position:absolute; width:40px; height:40px; text-align:center; left:50%; border:1px solid #fff; border-radius: 40px 40px 40px 40px; margin-left:-18px; bottom:180px; z-index:-1; font:normal 40px/40px 'playerregular'; cursor:pointer; visibility:hidden;display:none;color:#fff;}
.cssplay *[id*="pse"] {display:block; position:absolute; width:40px; height:40px; text-align:center; left:50%; border:1px solid #fff; border-radius: 40px 40px 40px 40px; margin-left:-20px; bottom:180px; z-index:-1; font:normal 40px/40px 'playerregular'; cursor:pointer; visibility:hidden;display:none;color:#fff;}

.cssplay *[id*="pre"]:hover {background:#26b5ff;}
.cssplay *[id*="nxt"]:hover{background:#26b5ff;}

.cssplay #bullets {width:1180px;position:absolute;bottom:50px;z-index:200;text-align:center;-webkit-transition:0.5s;transition:0.5s;}
.cssplay #bullets label {float:left;display:inline-block;width:295px;height:10px;margin:0px;background:#0091dc;cursor:pointer;padding:0px;}/*background:rgba(0,0,0,0.7);backgound*/
.cssplay #bullets label img {width:100px;position:absolute;left:-9999px;margin-left:-50px;bottom:30px;opacity:0;outline:1px solid #fff;box-shadow:0 2px 8px #000;-webkit-transition:opacity 1s,left 0s 1s;transition:opacity 1s,left 0s 1s;}

.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:#26b5ff}
.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:#0091dc;}
.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"])
{-webkit-animation:autoplay0 50s infinite 0s; animation:autoplay0 50s 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 50s infinite 5s; animation:autoplay1 50s 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 50s infinite 10s; animation:autoplay1 50s 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 50s infinite 15s; animation:autoplay1 50s infinite 15s;}
@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;}
}

@-webkit-keyframes autoplay0 {
    0%,10% {z-index:100; opacity:1; visibility:visible;}
    12%,100% {z-index:-1; opacity:0; visibility:hidden;}
}
@-webkit-keyframes autoplay1 {
    2%,10% {z-index:100; opacity:1; visibility:visible;}
    0%,12%,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 50s infinite  0s; animation:bullet0 50s 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 50s infinite  5s; animation:bullet1 50s 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 50s infinite  10s; animation:bullet1 50s 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 50s infinite  15s; animation:bullet1 50s infinite  15s;}
@keyframes bullet0 {
    0%,10% {background:#fff;}
    12%,100% {background:#0091dc;}
}
@keyframes bullet1 {
    2%,10% {background:#fff;}
    0%,12%,100% {background:#0091dc;}
}

@-webkit-keyframes bullet0 {
    0%,10% {background:#fff;}
    12%,100% {background:#0091dc;}
}
@-webkit-keyframes bullet1 {
    2%,10% {background:#fff;}
    0%,12%,100% {background:#0091dc;}
}

HTML: 
<div class="cssplay"><img class="blank" id="blank" src="/dat/img/blank.gif" alt=""> <input name="cssplay" id="img1" type="radio">
<input name="cssplay" id="img2" type="radio">
<input name="cssplay" id="img3" type="radio">
<input name="cssplay" id="img4" type="radio">
<input name="cssplay" id="play1" checked="checked" type="radio">
<input name="cssplay" id="play2" type="radio">
<input name="cssplay" id="play3" type="radio">
<input name="cssplay" id="play4" type="radio">
<input name="cssplay" id="pause1" type="radio">
<input name="cssplay" id="pause2" type="radio">
<input name="cssplay" id="pause3" type="radio">
<input name="cssplay" id="pause4" type="radio">
<img id="pic_01" src="/dat/img/banner_1418285763.jpg" alt="">
<img id="pic_02" src="/dat/img/banner_1418285781.jpg" alt="">
<img id="pic_03" src="/dat/img/banner_1418285798.jpg" alt="">
<img id="pic_04" src="/dat/img/banner_1418285834.jpg" alt="">
<span id="cap_01">Banner1<br>
Dies ist der demotext und <br>hier geht es zum<br> <a href="/bestellablauf">Bestellablauf</a></span>
<span id="cap_02">Banner2<br>
Dies ist der demotext und <br>hier geht es zum<br> <a href="/bestellablauf">Bestellablauf</a></span>
<span id="cap_03">Banner3<br>
Dies ist der demotext und <br>hier geht es zum<br> <a href="/bestellablauf">Bestellablauf</a></span>
<span id="cap_04">Banner4<br>
Dies ist der demotext und <br>hier geht es zum<br> <a href="/bestellablauf">Bestellablauf</a></span>
<label id="pre_01" for="img4" title="previous">&lsaquo;</label>
<label id="pre_02" for="img3" title="previous">&lsaquo;</label>
<label id="pre_03" for="img2" title="previous">&lsaquo;</label>
<label id="pre_04" for="img1" title="previous">&lsaquo;</label>
<label id="nxt_01" for="img2" title="next">&rsaquo;</label>
<label id="nxt_02" for="img3" title="next">&rsaquo;</label>
<label id="nxt_03" for="img4" title="next">&rsaquo;</label>
<label id="nxt_04" for="img1" title="next">&rsaquo;</label>
<label id="ply_01" for="play1" title="play">&gt;</label>
<label id="ply_02" for="play2" title="play">&gt;</label>
<label id="ply_03" for="play3" title="play">&gt;</label>
<label id="ply_04" for="play4" title="play">&gt;</label>
<label id="pse_01" for="pause1" title="pause">||</label>
<label id="pse_02" for="pause2" title="pause">||</label>
<label id="pse_03" for="pause3" title="pause">||</label>
<label id="pse_04" for="pause4" title="pause">||</label>
<div id="bullets"><label for="img1" id="bul_01"><img src="/dat/img/banner_1418285763.jpg" alt=""></label>
<label for="img2" id="bul_02"><img src="/dat/img/banner_1418285781.jpg" alt=""></label>
<label for="img3" id="bul_03"><img src="/dat/img/banner_1418285798.jpg" alt=""></label>
<label for="img4" id="bul_04"><img src="/dat/img/banner_1418285834.jpg" alt=""></label>
</div></div></div><!--Bannerrotation Ende-->
das ist es was mein script nach stu's Vorlage produziert.
 
habe gerade noch ein weiteres Fehlverhalten festgestellt.
sobald ich auf zurück also den linken button klicke geht er beim erstenmal zurück und nach dem zweiten klick wieder zum nachfolgendem anstatt zum vorvorherigem.

Vielleicht hilfts ja ich schaue ein weiteres mal konzentriert darüber.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück