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.

Ähnliches, das vielleicht dazu passt:

4 thoughts on “Ein (sehr, sehr) einfacher Slider für Bilder mit CSS

  1. Andreas Meenke

    CSS-Slider
    Diese Anleitung entspricht genau dem, was diese Fotografin (http://www.fotografie-anke-houdelet.de) auf ihrer Seite haben wollte: einen einfachen Bildscroll ohne Pipapo. Funzt auch auf allen Browsern, nur der InternetExplorer fällt mal wieder aus der Reihe, die Fotos sind hier nur Striche. Gibt es einen entsprechenden Code dafür (dagegen)?

    Herzlichen Dank für Deine Antwort
    Andreas Meenke

  2. Jens

    Hallo,

    der Slider funktioniert nicht.

    Trotz aller möglichen Versuche mit allen umgebenden Boxen brachen die Galeriebilder immer um.

    Eine Lösung findet man jedoch im Netz. Hier hat jemand (Sorry, Webadresse vergessen.) die innere Box des Sliders, also die, welche die Bilder enthält, mit einer enormen Überbreite versehen, bspw. mit 10 000 Pixeln (width : 10000px;) Das funktioniert!

    Schöne Grüße

  3. Jens

    Nachtrag:

    Überbreite muss nicht sein. Die Breitenangabe muss mindestens der Breite aller anzuzeigenden Bilder entsprechen PLUS einem kleinen Zusatz von ein paar Pixeln (ausprobieren!).

    Der Scrollbalken verändert seine Länge je nach Inhalt der Galerie. Je mehr Bilder vorhanden sind, desto schmaler wird der Balken. Das aber nur mal am Rande.

    Schöne Grüße

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.