CSS Slider - Steuerung auf/über den Bildern // Problem mit position?

Hallo ihr lieben, ich versuche mir endlich einen CSS Slider "beizubringen", als Hobby, hier das momentane Versuchsergebnis: CSS Slider Übungen und hier meine bisherigen CSS Erkenntnisse: http://yoterra.de/slider/formate_slider.css Leider bekomme ich die Steuerungspunkte/das Navi nicht über den Bildern platziert. Ich vermute ich habe da einen grundsätzlichen Fehler bei der Position? Habe dazu im WWW diese schöne Vorlage gefunden (Imageslider ohne Javascript - Ein einfacher Slider mit reinem CSS | Ebene 11 - Webentwicklung . AutoCAD . Schulung) , sitze schon seit zwei Tagen dran und zarteste sie Zeile für Zeile. Habe hier im Forum gerade ein recht interessantes Platzierungs-Beispiel von 2012 entdeckt: Navi über Slider legen und hier die Lösung dazu: JSFiddle Playground - habe ich noch nicht ausprobiert... Über Hilfe die Steuerung über die Bilder zu schieben sehr dankbar!

Der hier verwendete Code

<!doctype html> <html lang="de-DE"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CSS Slider Übungen</title> <style> *{ box-sizing:border-box; padding:0; margin:0; } body { background: #f3f3f3; display:flex; flex-direction:column; } .cssSlider { overflow: hidden; display:flex; width:90%; margin:50px auto 0; flex-direction:column; } .cssSlider input { position: absolute; left: -99999px; } #slide01:checked ~ .sliderElements { left:0%; } #slide02:checked ~ .sliderElements { left: -100%; } #slide03:checked ~ .sliderElements { left: -200%; } #slide04:checked ~ .sliderElements { left: -300%; } .sliderElements { list-style: none; display:flex; position: relative; left: 0; width: 400%; transition: left .8s ease-in-out; } .sliderElements figure{ border: solid 5px red; width:calc(100% / 4); display:flex; flex-direction:column; } .sliderElements img { width: 100%; height: 100%; } .sliderElements figcaption { color: #fff; position:absolute; /* wenn nur width:60% oder max-width:60% stehen würde klappt word-break nicht wenn man fenster klein zieht*/ max-width:calc((100% / 4)/100 * 60); bottom:40px; word-break:break-word; padding: .4em; background: rgba(0,0,0,.5); } .sliderControls { display:flex; justify-content:center; list-style:none; height:35px; bottom:35px; position:relative; } .sliderControls label { width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; background: #d4021d; color: white; } #slide01:checked ~ .sliderControls label[for="slide01"], #slide02:checked ~ .sliderControls label[for="slide02"], #slide03:checked ~ .sliderControls label[for="slide03"], #slide04:checked ~ .sliderControls label[for="slide04"] { background: #ddd; color: green; cursor:not-allowed; } .sliderControls label:hover{ background:green; color:white; cursor: pointer; } h2{ text-align:center; } </style> </head> <body> <div class="cssSlider"> <input type="radio" name="slider" id="slide01" checked="checked"> <input type="radio" name="slider" id="slide02"> <input type="radio" name="slider" id="slide03"> <input type="radio" name="slider" id="slide04"> <div class="sliderElements"> <figure> <img src="image/slider_01.jpg" alt=""> <figcaption>Hier könnte Beschreibung zum Bild 1 stehen.</figcaption> </figure> <figure> <img src="image/slider_02.jpg" alt=""> <figcaption>Eine tolle Beschreibung zu Bild 2</figcaption> </figure> <figure> <img src="image/slider_03.jpg" alt=""> <figcaption>Eine tolle Beschreibung zu Bild 3</figcaption> </figure> <figure> <img src="image/slider_04.jpg" alt=""> <figcaption>Eine tolle Beschreibung zu Bild 4</figcaption> </figure> </div> <div class="sliderControls"> <label for="slide01">1</label> <label for="slide02">2</label> <label for="slide03">3</label> <label for="slide04">4</label> </div> </div> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!