Fotoslider

Soelg · #1 (**permalink**) 29.05.2018, 13:43

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

cloned · #2 (**permalink**) 04.06.2018, 08:59

Welchen slider verwendest du denn auf deiner Seite?

Soelg · #3 (**permalink**) 05.06.2018, 13:56

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>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Suche ein jquery Fotoslider.	davekch	Javascript & Ajax	1	01.02.2011 21:29