|
|||
Fotoslider
Hallo,
ich suche Hilfe zu einer css- oder Javascript Einstellung: Wie kann ich die beiden vor- und zurück Pfeile für den Fotoslider einbauen, damit der Slider immer weiterrückt? Hier ist die Webseite, auf der das zu sehen ist. http://www.villa-am-trumpf.de Beste Grüße und vielen Dank im Voraus für Eure Hilfe! Dieter |
Sponsored Links |
|
|||
2 Verschachtelte Flexboxen ausrichten
Hallo cloned,
besten Dank für Deine Antwort! Hier zeige ich Dir nochmal mein Problem mit dem beigefügtem Code: Ich würde mich sehr über eine Lösung freuen! Also, Ich habe 2 Flexboxen verschachtelt. Die eine für die 3 Fotos mit den dazugehörigen Textboxen und die 2. mit dem jeweiligen Foto und der Textbox darunter. 1. Textbox soll mit der zweiten darunter "row" ausgerichtet sein und ab einer bestimmten Breite dann in "column. Wie kann ich das umsetzen oder ist das so gar nicht machbar? Grüße Dieter HTML-Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Flexbox</title> <link rel="stylesheet" type="text/css" href="styles.css" /> <style> body { max-width: 61.5%; margin: 0 auto; } img { max-width: 100%; height: auto; } .flexbox{ display: flex; flex-direction: row; background-color: gray; } .foto_text_flex { display: flex; } .bild_text { background-color: #feeded; margin: 0 0 0 1.5rem; border-radius: 3px; text-align: left; padding: 0 0.5em 0 1em; margin-bottom: 4em; max-width: 20%; } .foto { height: 80px; background: #d5c991; margin: 0 0 0.5em 1.5em; } </style> </head> <body> <!-- Fotorama Slider mit Textboxen --> <div class="flexbox"> <!-- 1 Flexbox für alle 3 Fotos --> <div class="foto_text_flex"> <!-- 2 Flexbox für fotorama(Fotoslider) mit Foto 1 und Textbox("bild_text")--> <div class="fotorama" data-allowfullscreen="true"> <img class="foto" src="fotorama_slider/images/zimmer/1.jpg" alt="Foto 1"> </div> <div class="bild_text"> <div id="akkordeon1"> <input type="checkbox" name="accordeon-title1" class="accordeon-checkbox" id="accordeon-title1" /> <div class="accordeon-content1"> <label for="accordeon-title1" class="accordeon-title-label1"></label> <p>Lorem ipsum dolor sit amet commodo consequat.</p> </div> </div> </div> </div> <div class="foto_text_flex"> <!-- 2 Flexbox für fotorama(Fotoslider) mit Foto 2 und Textbox("bild_text")--> <div class="fotorama" data-allowfullscreen="true"> <img class="foto" src="fotorama_slider/images/zimmer/1.jpg" alt="Foto 2"> </div> <div class="bild_text"> <div id="akkordeon2"> <input type="checkbox" name="accordeon-title2" class="accordeon-checkbox" id="accordeon-title2" /> <div class="accordeon-content2"> <label for="accordeon-title2" class="accordeon-title-label2"></label> <p>Lorem ipsum dolor sit amet commodo consequat.</p> </div> </div> </div> </div> <div class="foto_text_flex"> <!-- 2 Flexbox für fotorama(Fotoslider) mit Foto 3 und Textbox("bild_text")--> <div class="fotorama" data-allowfullscreen="true"> <img class="foto" src="fotorama_slider/images/zimmer/1.jpg" alt="Foto 3"> </div> <div class="bild_text"> <div id="akkordeon3"> <input type="checkbox" name="accordeon-title" class="accordeon-checkbox" id="accordeon-title3" /> <div class="accordeon-content3"> <label for="accordeon-title3" class="accordeon-title-label3"></label> <p>Lorem ipsum dolor sit amet commodo consequat.</p> </div> </div> </div> </div> </div> <!-- 1 Flexbox für alle 3 Fotos Ende --> <!--Ende div Slider--> </body> </html> |
Stichwörter |
fotoslider |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Suche ein jquery Fotoslider. | davekch | Javascript & Ajax | 1 | 01.02.2011 21:29 |