Karussells im Web ohne viel Schnick-Schnack programmieren
Kommentare

Heutzutage tendieren viele Entwickler dazu, ihr Projekt unnötig komplex zu gestalten – und dabei ist fast egal, was man erstellt. In den allermeisten Fällen ist diese Art von Komplexität allerdings übertrieben und unnötig und sorgt sogar dafür, dass das entsprechende Projekt nicht genutzt wird.

Beispiele für solch überflüssigen Schnick-Schnack gibt es viele im Web – zum Beispiel bei Karussells. Dass es jedoch auch ohne Dependencies und Brüche mit der Abwärtskompatibilität gehen kann, zeigt Christian Heilmann und präsentiert eine simple Karussell-Lösung, die auch über verschiedene Browser hinweg funktioniert.

Karussell-Gestaltung möglichst simpel halten

Manchmal funktionieren einige Dinge im Internet nicht, etwa weil die JavaScript-Datei nicht geladen wurde oder weil einige CSS-Properties nicht unterstützt werden. Je komplexer ein Projekt, desto wahrscheinlicher ist es, dass irgendwann Probleme auftauchen. Gerade bei Karussells entsteht oft das Problem, dass sie zwar interaktiv erscheinen, es in der Realität aber nicht sind oder für den User durch eine zu komplizierte Gestaltung nicht accessible sind.

Dem kann man leicht aus dem Weg gehen, wenn man die Gestaltung des Karussells möglichst simpel hält und einige einfache Tipps zum Einsatz von Web-Karussells beachtet. Essentiell ist es nichts anderes, als eine geordnete Liste in HTML, die mit ein wenig CSS aufgepeppt wird. Dabei wird die Karussell-Box relativ positioniert und die Listen-Items innerhalb der Box absolut.

Zwei Klassen reichen aus

Im Gegensatz zu typischen Karussell-Lösungen, bei denen jedes Item mit einer Klasse versehen wird, reichen zwei einzelne Klassen aus: für das Container-Element, das die Darstellung des Karussells auslöst und für das aktuell sichtbare Karussell-Element. Die Steuerung des Karussells wird mit JavaScript definiert – und zwar als Button, denn diese sind für eine Vielzahl von Eingabemöglichkeiten acccessible.

Weil sich beim Erstellen des Karussells vor allem auf das CSS und dessen eingebautes Crawling des DOMs verlassen wird, werden keine Loops benötigt. Um das Aussehen des Karussells noch ein wenig hübscher zu gestalten, kann mit einigen weiteren CSS-Features wie Transition, Opacity oder Transformation gearbeitet werden. Das Gute daran: werden sie in einem Browser nicht unterstützt, wird die entsprechende Funktion einfach nicht angezeigt, anstatt gleich eine Fehlermeldung auszugeben.

Wie man im Einzelnen beim Erstellen eines simplen Karussells vorgehen sollte, erklärt Christian Heilmann mit Code-Beispielen ausführlich in seinem Artikel Keeping it simple: coding a carousel und zeigt das fertige Resultat in einer Demo. Natürlich kann man das Karussell am Ende noch ein wenig aufwändiger gestalten – zum Beispiel mit CSS3-Animationen – doch angesichts der umfangreichen Funktionalität, die das Web heutzutage mit sich bringt, sollte man sich vielleicht manchmal auch auf die einfachen Dinge beschränken.

Aufmacherbild: Keep It Simple written in chalk on a used blackboard. A well known saying for business strategy, project management and planning. von Shutterstock / Urheberrecht: Thinglass

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -