zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Fotoslider

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 29.05.2018, 13:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.03.2012
Beiträge: 23
Soelg befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.06.2018, 08:59
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.846
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Welchen slider verwendest du denn auf deiner Seite?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 05.06.2018, 13:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.03.2012
Beiträge: 23
Soelg befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Antwort

Stichwörter
fotoslider

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:36 Uhr.