Design Clean
    >> Tipps zum anpassen

CSS Bilderslider

CSS Bilderslider im Seiteninhalt

  Bei Mauskontakt fährt ein Info-Text ins Bild. Für 5 Bilder in der Größe 500 x 270 Pixel.

  • Sylt

    Sylt - im Februar 2015

  • Sylt

    Sandsturm Strandpromenade

  • Sylt

    Sylt - Windstärke 9

  • Sylt

    Sylt - am Brandenburger Strand

  • Ich

    Ich - unterwegs im Norden

Schritt 1: Der HTML-Code für den Seiteninhalt
  • auf Seiten
  • Seite wählen, wo der Slider hinein soll
  • im Editor oben Links auf "Quellcode" klicken
  • und folgenden HTML-Code einfügen
<div id="slider">
<div id="mask">
<ul>

<li id="first" class="firstanimation">
<a href="/Seite.htm"><img src="Grafikadresse 1" alt="Sylt" /></a>
<div class="tooltip"> <h2>kurzer Info-Text zum Bild 1</h2></div>
</li>

<li id="second" class="secondanimation">
<a href="/Seite.htm"><img src="Grafikadresse 2" alt="Sylt" /></a>
<div class="tooltip"><h2>kurzer Info-Text zum Bild 2</h2></div>
</li>
            
<li id="third" class="thirdanimation">
<a href="/Seite.htm"><img src="Grafikadresse 3" alt="Sylt" /></a>
<div class="tooltip"><h2>kurzer Info-Text zum Bild 3</h2></div>
</li>
                        
<li id="fourth" class="fourthanimation">
<a href="/Seite.htm"><img src="Grafikadresse 4" alt="Sylt" /></a>
<div class="tooltip"><h2>kurzer Info-Text zum Bild 4</h2></div>
</li>
                        
<li id="fifth" class="fifthanimation">
<a href="/Seite.htm"><img src="Grafikadresse 5" alt="Ich" /></a>
<div class="tooltip"><h2>kurzer Info-Text zum Bild 5</h2></div>
</li>

</ul>
</div>
<div class="progress-bar"></div>
</div>

Schritt 2: Der CSS-Code
  • auf "Extras" gehen
  • das Extra "Eigener <head> Inhalt" aktivieren
  • nun folgenden CSS-Code einfügen:
<link rel="stylesheet" type="text/css" href="https://img.webme.com/userfiles/clean-test/slider2.css">
<style type="text/css">
<!--

/* SLIDER */
#slider {
	background: #000;
	border: 5px solid #eaeaea;
	box-shadow:1px 1px 5px rgba(0,0,0,0.7);
	height: 270px;
	width: 500px;
	margin: 40px auto 40px auto;
	overflow: visible;
	position: relative;
}
#mask { overflow: hidden; height: 270px; }
#slider ul { margin:0; padding:0; position:relative; }

#slider li {
	width: 500px;
	height: 270px;
	position: absolute;
	top: -275px;
	list-style: none;
}

#slider li.firstanimation {animation:cycle 25s linear infinite;}
#slider li.secondanimation {animation:cycletwo 25s linear infinite;}
#slider li.thirdanimation {animation:cyclethree 25s linear infinite;}
#slider li.fourthanimation {animation:cyclefour 25s linear infinite;}
#slider li.fifthanimation {animation:cyclefive 25s linear infinite;}

#slider .tooltip {
	background:rgba(0,0,0,0.7);
	width:280px;
	height:60px;
	position:relative;
	bottom:75px;
	left:-300px;
	transition:all 0.3s ease-in-out;  
}
#slider .tooltip h2 {
	color: #fff;
	font-size: 18px;
 	font-weight: 200;
	line-height:60px;
	padding:0 0 0 20px;
}
#slider li#first:hover .tooltip, 
#slider li#second:hover .tooltip, 
#slider li#third:hover .tooltip, 
#slider li#fourth:hover .tooltip, 
#slider li#fifth:hover .tooltip {left:0px;}

#slider:hover li, 
#slider:hover .progress-bar {animation-play-state:paused;}

/* Ladebalken unter Bild  */
.progress-bar { 
	position:relative;
	top:-5px;
	width:500px;
	height:5px;
	background:#000;
	animation:fullexpand 25s ease-out infinite;
}
-->
</style>

User mit dem Baukasten-Design "Clean" benötigen noch diese Codezeile dazu:
img {max-width:100%!important;}

mit einfügen, vor dem --> </style>




Hier wurde die Seite https://clean-test.de.tl/nix.htm eingebunden.

- die Seite wurde in der Navi versteckt
- nur auf der Seite wurden alle div + table entfernt
- im Feld "Text UNTER Design" wurde dieser Inhalt eingefügt
- Inhalt wurde nur für diese eine Seite sichtbar gemacht
- so lässt sich auch eine Seite in der Mediabox aufrufen

Man muss darauf achten, das die Seite hier nur soviel Inhalt bekommt, wie diese Box auch an Höhe hat.

Wer mehr Infos dazu benötigt: Kontakt
clean-test.de.tl: Heute :17 Aufrufe



Auf "autostart" habe ich verzichtet. Klicke Play im Player.

nach Oben