Mehr Pep für’s Bootstrap-Karussell: so fügt man ihm leicht CSS3-Animationen hinzu
Kommentare

Ein typischer Wunsch vieler Unternehmen ist das Hinzufügen eines Sliders oder Karussells zu ihrer Website, um einzelne Produkte oder Content-Bereiche deutlich hervorzuheben. Dank unzähliger Plug-ins ist die Integration eines Web-Karussells in den meisten Fällen auch kein Problem, und viele der angebotenen Optionen bieten bereits ausreichend Konfigurationsmöglichkeiten und dynamische Effekte.

Allerdings reicht oft auch ein leichtgewichtiges Karussell mit minimalen Einstellungsoptionen aus – etwa die Bootstrap-Karussell-Komponente, wenn man bereits Bootstrap für das Projekt verwendet. Maria Antonietta Perna erklärt, wie man dem Bootstrap-Karussell Animationen hinzufügen kann, um es zu einem echten Hingucker auf der Website zu machen.

Animate.css und die Bootstrap-Karussell-Komponente

Animationen lassen sich auf verschiedene Art und Weise zu Elementen einer Website hinzufügen, etwa von Grund auf mit CSS3-Animationen oder einfacher mit der Open-Source-CSS3-Library Animate.css, die wir euch in der Vergangenheit schon ausführlicher vorgestellt haben. Damit lassen sich auch dem Bootstrap-Karussell leicht einige ansprechende Effekte hinzufügen.

Zuvor werfen wir aber einen kurzen Blick auf die Bereiche der Bootstrap-Karussell-Komponente. Sie besteht aus dem Karussell-Indikator, mit dem zum Beispiel die Anzahl der Slides und die aktuelle Position innerhalb des Karussells angezeigt werden können, dem Karussell-Item, das jeden individuellen Slide repräsentiert und der Karussell-Steuerung, mit der User zu den nächsten oder vorigen Slides navigieren können.

Animationen in das Bootstrap-Karussell einfügen

Hat man erstmal die HTML-Struktur für ein Bootstrap-Karussell – beispielsweise mithilfe eines der verfügbaren Starter-Templates – erstellt, kann mit dem Hinzufügen der Animation begonnen werden. Dafür wird zunächst mit dem animation-delay-Property definiert, wann die einzelnen Animationen beginnen. Anschließend wird das Karussell mit JavaScript initialisiert und die Animationen angepasst.

So sollten die Animationen im ersten Slide beginnen, wenn die Seite geladen wird. Sobald alle Animationen im ersten Slide ausgeführt wurden, pausiert das Karussell automatisch. Zwar lässt sich dieses Feature auch ausschalten, allerdings läuft man so einerseits Gefahr, dass das Karussell weiterläuft, bevor alle Animationen durchgeführt wurden, andererseits sollte man die Accessibility des Karussells und die damit verbundene User Experience im Hinterkopf behalten.

Maria Antonietta Perna beschreibt das Vorgehen beim Hinzufügen von Animationen zu einem Karussell deutlich ausführlicher und mit Code-Beispielen in ihrem Artikel zum Thema. Dort findet sich auch eine Demo eines mit CSS3-Animationen versehenen Bootstrap-Karussells, die zeigt, dass sich mit Animate.css und nur wenigen Zeilen jQuery Karusselle leicht aufpeppen lassen.

Übrigens: wer noch weitere Tipps zum Einsatz von Web-Karussellen sucht, findet sie zum Beispiel in den Sieben Tipps, wie Karussells erfolgreich eingesetzt werden.

Aufmacherbild: illuminated retro carousel at night von Shutterstock / Urheberrecht: Artem and Victoria Popovy

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -