Free Bootstrap 3 Carousel / Slider Collection


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…

Wie gehts weiter?

Geplant ist, die Collection zu erweitern! Wann immer ich bei meiner Arbeit eine neue Carousel oder Slider Variante erstelle, werde ich diese der Collection hinzufügen. Wer mitmachen möchte, kann mir gern sein Bootstrap Carousel schicken.

Projektseite

Hinweis! 

Auf der Projektseite findet ihr den Code zu jedem gezeigten Beispiel sowie den Download Link für die komplette Collection. Sollte euch die Collection geholfen haben, freue ich mich über einen Kommentar oder einen Link zum Beitrag oder besser ihr teilt die Collection. 🙂

In eigener Sache! 

Das Script ist meine persönliche Lösung, ich erhebe keinen Anspruch darauf, dass diese auch die Beste ist. Änderungen, Verbesserungen und Optimierungen am Script sind ausdrücklich erlaubt. Die Benutzung des Scriptes erfolgt auf eigene Gefahr. Für eventuelle Schäden, die durch den Einsatz bzw. die Nutzung des Scriptes entstehen, übernehme ich keine Haftung.

19.01.2014 Autor: Rico Loschke Kategorie: Bootstrap 8



Eine Antwort zu “Free Bootstrap 3 Carousel / Slider Collection”

  1. Gitte sagt:

    Richtig klasse, dass du dazu eine Projektseite gemacht hast. Bin echt begeistert von den ganzen kleinen Sachen.

    Liebe Grüße
    Gitte

Schreibe einen Kommentar

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