Tag Archives: css

Ein (sehr, sehr) einfacher Slider für Bilder mit CSS

Zugegeben, der Begriff „Slider“ in der Überschrift ist irreführend. Denn in diesem Fall geht es nur darum, innerhalb einer Box mit festgelegter Breite viele Bilder nebeneinander darzustellen. Unter dem Stichwort „Karussell“ oder eben „Slider“ gibt es dafür etliche Lösungen, die zum Beispiel auf jQuery basieren. Sie kommen mit wunderbaren Effekten daher, sind hübsch anzuschauen und in der Regel recht leicht in die eigene Webseite implementierbar.

Manchmal wird aber aber eine puristische Lösung gänzlich ohne Effekte benötigt. Früher, zur Zeit der Jahrtausendwende, hätte man dafür ein iFrame in die Seite gebaut. Das wäre natürlich heute auch noch möglich. Ein iFrame hat aber eine etwas grobschlächtige Anmutung. Genauso gut könnte versuchen, eine Stecknadel mit einem Vorschlaghammer in ein Kissen zu rammen. Eine simple und elegante Lösung lässt sich statt dessen prima mit CSS finden. Benötigt werden lediglich zwei div-Container. Das Zauberwort heißt overflow.

Die erste div-Box bildet lediglich den Rahmen für den Bilder-„Slider“ und hat eine festgelegte Größe. In diesem Beispiel nimmt sie 90 Prozent der eigentliche Webseite ein. Möglich ist natürlich auch eine pixelgenaue Angabe.

#wrapper { // das ist die Breite der Webseite
  width: 960px;
}
#bildbox_rahmen { // die Box für den Silder
  width: 90%;
  height: 300px;
  overflow: auto;
}

Overflow sorgt dafür, dass ein Scrollbalken eingeblendet wird, wenn Inhalte nicht mehr in die Box passen. Nun brauchen wir noch eine Box, in der die Bilder abgelegt werden:

#bildbox {
  width: auto;
  white-space: nowrap;
}

Diese Box muss natürlich breiter sein als die Rahmen-Box, damit der Scroll-Effekt sichtbar wird. Da wir beliebig viele Bilder einfügen möchten, die horizontal dargestellt werden, bekommt die Box dennoch nur die Breitenangabe auto. Sollte jedes Bild eine Breite von 200 Pixeln haben, wird die Scrollbar also ab dem fünften Bild sichtbar.

Im Grunde war’s das in Sachen CSS. white-space: nowrap sorgt dafür, dass Leerzeichen im Quellcode keinen Abstand bzw. Umbruch verursachen. So können wir die Bilder im HTML-Quellcode untereinander auflisten, ohne Abstände zwischen den Bildern zu erzeugen. Weitaus eleganter wäre es natürlich, die Bilder innerhalb von Listen-Elementen zu platzieren. Dann müssten wir, ebenfalls über CSS, dafür sorgen, dass die Elemente mittels float: left; nebeneinander positioniert werden. Die entsprechende Klasse könnte so aussehen:

.bildauflistung {
  list-style: none;
  float: left;
}

Nun wird das HTML-Dokument angepasst:

<html>
<body>

<div id="wrapper">
	<h1>Ein sehr einfacher Bilder-Slider</h1>
	<div id="bildbox_rahmen">
		<div id="bildbox">
			<ul class="bildauflistung">
				<li><img src="pic1.jpg"></li>
				<li><img src="pic2.jpg"></li>
				<li><img src="pic3.jpg"></li>
				<li><img src="pic4.jpg"></li>
				<li><img src="pic5.jpg"></li>
				<li><img src="pic6.jpg"></li>
			</ul>
		</div>
	</div>
	
</div>

</body>
</html>

Das Ergebnis ist, wie bereits erwähnt, sehr puristisch: Ein einfacher Scrollbalken innerhalb der Seite. Aber selbst wenn diese Art der Darstellung nicht für das endgültige Aussehen der Webseite in Frage kommt, kann sie während der Produktion prima als Platzhalter für später kommende js-Spielereien genutzt werden.