5202

ein Blog über technische Fragen zu Blogger

Einfacher Slider mit :hover

von
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:
<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 sind fünf schlichte Ankerelemente:
<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>
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>
<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. Mit position: absolute und top: 0;left=0 stapeln wir alle Bilder zuerst einmal übereinander.
#hoverslide li {
 position: absolute;
 top: 0;
 left: 0;
 margin: 0;
 padding: 0;
 list-style: none;
 display: block;
 width: 400px;
 height: 500px;
 background: #transparent;
}
Wir zentrieren die Bilder innerhalb der Listenpunkten horizontal und vertikal:
#hoverslide li img {
 margin: 50px auto;
 display: block;
}
Als letztes platzieren wir die Bilder nebeneinander - jeder Listenpunkt wird um jeweils 400px nach Rechts verschoben.
#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
}
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?

Bauen wir jetzt den Rahmen - der wird ebenfalls absolute positioniert und mit einem Asbach Uralt Trick vertikal zentriert:
#holder{
 position: absolute;
 top: 0px;
 left: 50%;
 margin-left: -200px;
 height: 500px;
 width: 400px;
 border: 2px solid #a66300;
 overflow: hidden;
}
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.

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.
a.a1:hover ~ #holder #hoverslide li {
left: -400px;
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.a2:hover ~ #holder #hoverslide li {
left: -800px;
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 ...

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:
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;
}
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:
#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
}
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!

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.

Anmerkungen, Fragen

Ihr seid verwirrt? Gehr mir auch oft so, dazu gibt es die Kommentare, fragen hilft da nämlich (manchmal). Für Fragen, die thematisch eher nicht zu dem Post passen, habe ich ein Forum.