3.9.12
Einfacher Slider mit :hover
Make it simple, stupid! Eine meiner Grundüberzeugungen - alles so einfach wie nur immer möglich machen!Ich sehe in blogspot.com Blogs oft gigantische Javascripts an triviale Aufgaben werkeln, etwa ein paar Bilder zu 'sliden' ... ich meine, in vielen Fällen würden da auch ein paar Zeilen CSS reichen.
Heute mal eine von diesen 'simplen' Ideen und zwar wie man Bilder mit einem stink-normalen Hover sliden kann, d.h. wenn man mit der Mause über einen Link fährt, wird das entsprechende Bild 'eingeslidet' ... yeah, good denglish, isn't it?
Fahrt in der Skizze mit der Mause über die Links und das entsprechende Bild wird angezeigt - auch wenn ihr mit der Mause nicht über dem Link seid, bleibt das Bild stehen.
Funktioniert in allen richtigen Browsern - im IE ab 9+.
Neu! Download-Link
Ich habe was neues im Blog, nämlich Donwload-Links für die jeweilige Skizzen. Dort findet ihr ab jetzt die komplette CSS mit allen Vendor-Prefixen und sonstigem Drumherum. Das erspart mir in der Erklärung 'ne Menge Schreibarbeit und macht den Text übersichtlicher!Achtung: Ich gebe die CSS nur in einer vereinfachten Schreibweise - die Vendor-Prefixe findet ihr im Download.
HTML
Die HTML ist nicht besonders kompliziert - die Bilder stehen in einer Unsortierten Liste, diese Liste wiederum in einem Div-Container, der später der 'Rahmen' für den Slider wird:Die Links sind fünf schlichte Ankerelemente:
<div id="holder">
<ul id="hoverslide">
<li><img src="http://goo.gl/nqxye"/></li>
<li><img src="http://goo.gl/4d6fr"/></li>
<li><img src="http://goo.gl/PG7Xc"/></li>
<li><img src="http://goo.gl/PiBMz"/></li>
<li><img src="http://goo.gl/5RZh6"/></li>
</ul>
</div>
Die Links kommen oberhalb der Bilder ... in meiner Skizze stehen die Links scheinbar unterhalb der Bilder, aber vergesst das erst mal. Um die Skizze zu verstehen, sieht das gesamte HTML im Prinzip so aus:
<a class="link a1" href="">Vladimirskaja</a>
<a class="link a2" href="">Dreifaltigkeitsikone</a>
<a class="link a3" href="">Evangelist Markus</a>
<a class="link a4" href="">Christus Pantokrator</a>
<a class="link a5" href="">Christus Taufe am Jordan</a>
<a class="link a1" href="">Vladimirskaja</a>
<a class="link a2" href="">Dreifaltigkeitsikone</a>
<a class="link a3" href="">Evangelist Markus</a>
<a class="link a4" href="">Christus Pantokrator</a>
<a class="link a5" href="">Christus Taufe am Jordan</a>
<div id="holder">
<ul id="hoverslide">
<li><img src="http://goo.gl/nqxye"/></li>
<li><img src="http://goo.gl/4d6fr"/></li>
<li><img src="http://goo.gl/PG7Xc"/></li>
<li><img src="http://goo.gl/PiBMz"/></li>
<li><img src="http://goo.gl/5RZh6"/></li>
</ul>
</div>
CSS
Fangen wir bei der CSS mit der Linkliste an - jeder Listenpunkt wird zum 'Träger' eines Bildes und bekommt eine Breite und Höhe. Mitposition: absolute und top: 0;left=0 stapeln wir alle Bilder zuerst einmal übereinander. Wir zentrieren die Bilder innerhalb der Listenpunkten horizontal und vertikal:
#hoverslide li {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
list-style: none;
display: block;
width: 400px;
height: 500px;
background: #transparent;
}
Als letztes platzieren wir die Bilder nebeneinander - jeder Listenpunkt wird um jeweils 400px nach Rechts verschoben.
#hoverslide li img {
margin: 50px auto;
display: block;
}
Falls das erste Bild sichtbar sein soll, ist die Verschiebung für das erste Bild "0", für das zweite Bild "400px" usw. Verständlich?
#hoverslide li:nth-of-type(1) {
margin-left:400px
}
#hoverslide li:nth-of-type(2) {
margin-left:800px
}
#hoverslide li:nth-of-type(3) {
margin-left:1200px
}
#hoverslide li:nth-of-type(4) {
margin-left:1600px
}
#hoverslide li:nth-of-type(5) {
margin-left:2000px
}
Bauen wir jetzt den Rahmen - der wird ebenfalls
absolute positioniert und mit einem Asbach Uralt Trick vertikal zentriert: Ich verschiebe den Rahmen um 50% nach links und dann um die Hälfte der Breite wieder nach Rechts. Der Rahmen ist genauso breit wie die einzelnen Listenpunkt, jedes Bild ist folglich innerhalb des Rahmens automatisch zentriert.
#holder{
position: absolute;
top: 0px;
left: 50%;
margin-left: -200px;
height: 500px;
width: 400px;
border: 2px solid #a66300;
overflow: hidden;
}
Mit
overflow: hidden werden alle Bilder außerhalb des Rahmens ausgeblendet ... d.h ihr sehr am Anfang gar keine Bilder, da ja das erste Bild um 400px nach rechts verschoben ist. General sibling combinator
Okay, der Rahmen ist gebaut, alle Bilder sind ausgeblendet, wie bekommen wir jetzt ein Bild zu sehen?Dazu benützen wir unsere gute alte Hover Pseudoklasse und den General sibling combinator. Das Zeichen
~ ist die "Tilde" und wird mit ALT + N geschrieben. In Worten ausgedrückt: Wenn ich mit der Mause über den ersten Anker fahre, dann verschiebe ich alle Listenpunkte um 400px nach links ... wie bekomme ich das zweite Bild zu sehen? Ganz adäquat dazu:
a.a1:hover ~ #holder #hoverslide li {
left: -400px;
Wenn ich mit der Mause über den zweiten Anker fahre, dann verschiebe ich alle Listenpunkte um 800px nach links ... womit das erste Bild schon wieder außerhalb des Rahmens landet und nicht mehr zu sehen ist ...
a.a2:hover ~ #holder #hoverslide li {
left: -800px;
Fertig ist der Slider!
Transition
Natürlich noch nicht ganz fertig :=( - weil die Pointe fehlt. Warum bleiben die Bilder nach dem Hover stehen und verschwinden nicht sofort wieder? So wie man es normalerweise von einem Hover erwartet?Das wird mit einer sehr sophisticated Transition Eigenschaft gemacht, nämlich der
transition-delay (Verzögerung). Die Links bekommen alle eine Transition Dauer: Das bedeutet, das beim hovern jede 'Verschiebung' der Listenpunkte 0.2 Sekunden dauert. Das 'Rückfallen' auf den ursprünglichen Zustand bekommt nun eine Verzögerung:
a.a1:hover ~ #holder #hoverslide li,
a.a2:hover ~ #holder #hoverslide li,
a.a3:hover ~ #holder #hoverslide li,
a.a4:hover ~ #holder #hoverslide li,
a.a5:hover ~ #holder #hoverslide li {
transition: .2s;
}
Der 'Rückfall' dauert damit 3600 / 60s = 60min = 1h, d.h. für eine Stunde bleiben die Bilder in dem Slider stehen. Für die meisten Fälle dürfte das mehr als praktisch ausreichend sein!
#hoverslide li:nth-of-type(1),
#hoverslide li:nth-of-type(2),
#hoverslide li:nth-of-type(3),
#hoverslide li:nth-of-type(4),
#hoverslide li:nth-of-type(5) {
transition-delay: 3600s
}
Hover
Wie immer bei Sachen, die mit:hover gemacht sind, wird das schnell ziemlich zappelig. Ihr werdet das merken, wenn ihr mit der Mause schnell über die Seite fahrt, das sich der Slider unabsichtlich verschiebt.Ich denke bei so etwas ist es gut, die Links möglichst weit außen zu legen, damit sie nicht ständig im Weg rumstehen.