Carousel und Slider sind mittlerweile absoluter Standard im Webdesign. Sie sind ein gutes Instrument Informationen interaktiv zu vermitteln. Weil unterschiedliche Anforderungen auch unterschiedliche Lösungen erfordern, gibt es sie in den verschiedensten Farben und Formen. Schön wenn man dabei nicht immer bei Null beginnen muss.
Mit dem Bootstrap Framework hat man eine sehr gute Basis ein neues Projekt zu starten. Folgender Beitrag behandelt im Besonderen die Carousel/Slider Komponente dieses Framework. Der Beitrag richtet sich hierbei an Leute die Bootstrap bereits kennen und damit arbeiten. Die Syntax basiert auf der aktuellen Bootstrap 3 Version.
Standard Setup
Bootstrap Docs bietet alle wichtigen Infos zur Implementation. Zu beachten ist dabei, dass alle Javascript Komponenten von Bootstrap auf jQuery basieren, sprich muss ich immer auch eine aktuelle Version von jQuery einbinden.
SCRIPT MARKUP
Das wars schon. Bootstrap CSS Framework, jQuery und die Bootstrap Javascript Plugins sind eingebaut. Die Carousel Komponente mit der ID “myCarousel” ist ebenfalls schon initialisiert und der Timer ist auf 4000ms gesetzt, was bedeutet, dass das Carousel alle 4sek den Inhalt wechselt.
HTML Markup
Fertig! Und so schaut das Standard Bootstrap Carousel aus. Demo
Das Bootstrap Carousel ist flexibel einsetzbar und arbeitet mit HTML Inhalten und ist somit mehr als ein reiner Image Slider. Das Carousel besteht aus den einzelnen “items”, den “controls” und den “indicators”. Die letzten beiden dienen der manuellen Navigation des Carousels.
Bootstrap 3 Carousel / Slider Collection
In meinen letzten Projekten kam das Bootstrap Carousel regelmäßig zum Einsatz und es musste dabei die unterschiedlichsten Aufgaben erfüllen. Damit sich die verschiedenen Slider auch optisch ins Projekt einfügen, wurden zusätzlich Anpassungen am Style vorgenommen. In Zeiten von OpenSource und SocialSharing möchte ich hier meine Bootstrap Carousel Varianten zur Verfügung stellen. Dazu habe ich die Carousel Beispiele auf ein Minimum reduziert. Sie beinhalten jetzt nur die notwendigsten Anpassungen an HTML Markup und CSS. Bootstrap ist ein Responsive Framework mit Mobile First Ansatz. Auch das Bootstrap Carousel passt sich somit der zur Verfügung stehenden Breite an. Deshalb sind die Beispiele der Collection auch nicht auf die dargestellte Variante beschränkt und eignen sich meist auch für andere Einsatzzwecke. Genau aus diesem Grund, habe ich gänzlich auf eine Optimierung der einzelnen MediaQueries verzichtet. Das erleichtert die Weiterverarbeitung bei der Anpassung an die eigenen Bedürfnisse.
Was ist enthalten?
Die Collection beinhaltet nützliche Bootstrap Carousel und Slider Varianten des täglichen Webdesigner Bedarfs. Zum Beispiel:
- Fullscreen Background Carousel
- Thumbnail- und Product-Slider
- Fullscreen Header Carousel
- Carousel mit Thumbnail Navigation
- und weitere…