Schicke und kostenlose Slider, ganz ohne JavaScript

Die Art und Weise, wie Websites entwickelt und besucht werden, hat sich in den letzten Jahren stark verändert. Die mobile Nutzung wächst und Techniken wie HTML5 und CSS3 machen vieles möglich, was vorher nicht ging oder nur über Umwege realisierbar war.

Aber eines hat sich seit Jahren bewährt: Content-Slider. Sie haben zwei große Vorteile. Zum einen können Inhalte platzsparend so untergebracht werden, dass sie ohne zu scrollen, sichtbar sind. Und zweitens fallen sie dank der animierten Übergänge auf und heben sich vom meist statischen Rest einer Seite ab.

Elementor-Slider

Der beste WordPress Page-Builder im Markt, Elementor, kann natürlich auch Slider. Pfeil- und Punktnavigation. Mit Zitaten, Bildern, Autoslider usw. Dieses und viele weitere Widgets gibt es in der Pro-Version von Elementor.

Solltest du überhaupt Slider einsetzen?

Slider sind vor allem bei Webdesignern beliebt. Sie sparen Platz und man kann viele Inhalte auf engstem Raum unterbringen. Doch je nach Art und Weise, wie Slider designed und eingesetzt werden, spricht vieles tatsächlich gegen die Nutzung von Slidern. 

Eine Studie auf der Notredame Universität mit 3,7 Millionen Besuchern ergab, dass nur 1,07 % der Besucher überhaupt den Slider geklickt haben. ^[1]

Von den 1 % Besuchern, die also mit dem Slider interagiert haben, haben wiederum 89,1 % den ersten Slider geklickt, während der Anteil an Klicks bei den nachfolgenden Slides im niedrigen einstelligen Bereich lag:

Die Frage sei erlaubt: Wenn von 1 % der Besucher nur 3 % auf die Slider ab Position 2 klicken, also 0,3 Promille, solltest du dann nicht lieber komplett auf den Einsatz von Slidern verzichten? Diese Frage beantworten wir weiter unten (siehe „Slider nach Inhalte und Nutzen einsetzen“).

Schöne Slider in TypeScript (hier also mit JavaScript)

Es ist schön zu sehen, wie sauber und modern das oft geschmähte UI-Element bei SplideJS gestaltet ist. Auch die Homepage ist vollgepackt mit Demos. Keine Abhängigkeiten, geschrieben in TypeScript, und mit einem sauberen Bericht von Lighthouse.

Keen-Slider

Ein Slider mit Bilderrahmen

Der Erschaffer dieses Sliders, Joshua Hibbert, hat sich etwas ganz Besonderes ausgedacht: Alle Bilder werden in einem Bilderrahmen angezeigt.

Liebhaber semantischen HTMLs wird dieses Beispiel besonders entzücken, benützt es doch den <li> -Tag, sodass du quasi von einem Listeneintrag zum nächsten springst, wenn du auf das nächste Bild klickst.

Responsiver Image-Slider mit Bildunterschriften

Diese Bilder-Slideshow ist nicht nur besonders hübsch anzusehen, sondern besticht vor allem durch die einfach anzupassenden Bildunterschriften und das aufgeräumte Markup. Die Bilder wechseln automatisch und die Geschwindigkeit lässt sich einfach in Zeile 26 des CSS-Codes anpassen. Erschaffen von Dudley Storey.

Klickbarer Bild-Slider

Ein CSS-only-Slider von John Motyl Jr.

Ein Slider mit Vor- und Zurück-Buttons

Ein Image-Slider ohne JavaScript, mit Vor- und Zurück-Buttons, mit Navigationspunkten und hübschen Bildübergängen.

Slider nach Inhalte und Nutzen einsetzen

Neben dem technisches Aspekt ist der Nutzen eines Sliders ebenso wichtig– vor allem für die Besucher einer Website. Es ist verständlich, dass ein Betreiber einer Website möglichst viele Inhalte mit möglichst viel Aufmerksamkeit präsentieren möchte.

Während ausschließliche Bilder-Slider meist problemlos funktionieren, sind jene mit Texten immer ein wenig problematisch. Denn häufig verschwindet der Inhalt, bevor man zu Ende gelesen hat. ^[2] Daher sollte man besonders bei Slidern mit Texten einige Punkte beachten.

Die Texte innerhalb eines Sliders solltest du kurz halten – bestenfalls ein Teaser oder eine kurze Bildunterschrift. Die Anzeigedauer reicht im Idealfall immer aus, um den Text ganz lesen zu können. Befindet sich ein Besucher mit der Maus innerhalb des Content-Sliders, sollte die Animation anhalten, sodass der aktuelle Inhalt stehen bleibt. So ärgert sich niemand, dass der Slider schneller ist, als das Auge lesen kann.

Hat dein Besucher erst einmal manuell in die Animation eingegriffen, indem er eine Seite vor oder zurück gescrollt hat, solltest du sicherstellen, dass die Animation nicht mehr automatisch fortgeführt wird. Hier kannst du davon ausgehen, dass der Nutzer den Slider grundsätzlich lieber selbst steuern möchte.

Den Überblick behalten

Zwar kannst du in einem Content-Slider viele Inhalte platzsparend unterbringen. Letztendlich geht dies für den Besucher jedoch auf Kosten der Übersichtlichkeit. Während dieser bei unter- oder nebeneinander angeordneten Inhalten stets im Blick hat, wo sich was befindet, ist bei einem Content-Slider immer nur ein Inhalt im sichtbaren Bereich.

Bei drei Inhalten im Slider ist das noch recht übersichtlich. Alles darüber hinaus kann dazu führen, dass dein Besucher interessante Inhalte innerhalb des Sliders nicht wiederfindet.

Zu wenig Aufmerksamkeit für andere Inhalte

So sehr ein Slider die Aufmerksamkeit auf sich zieht, so sehr sorgt er natürlich dafür, dass andere Inhalte deiner Seite in den Hintergrund geraten. Und selbst wenn ein Nutzer den Slider links liegen lässt und sich mit umliegenden Inhalten beschäftigt, kann die ständige Animation eines Sliders durchaus ablenkend wirken.

Daher solltest du generell Slider behutsam einsetzen. Auf Übersichtsseiten, auf denen es nur gilt, Inhalte anzureißen, stören sie weniger. Auf anderen Seiten, die eher auf den Inhalt fokussiert sind, können sie zu sehr stören und sollten nicht eingesetzt werden. Willst du dennoch nicht drauf verzichten, solltest du die Animation zumindest nicht automatisch, sondern nur auf Interaktion des Nutzers laufen lassen.

Slider für Mobilgeräte optimieren

Immer häufiger werden Websites auf Mobilgeräten aufgerufen. Neben einem responsiven Layout gehört gerade bei Content-Slidern auch eine für Mobilgeräte angepasste Bedienung dazu. Während auf Desktoprechnern klassischerweise mit der Maus bedient wird und per Pfeil-Buttons der Slider bewegt werden kann, erfolgt die Bedienung auf Smartphones mit den Fingern.

Hier solltest du deinen Besuchern die Möglichkeit bieten, Slider mit der gängigen Wischgeste bedienen zu können. Achte auf dieses Feature, wenn du dich für eine der vielen Slider-Bibliotheken entscheidest. Denk dran, neben Responsivität ist die Gestensteuerung dann ein ganz wichtiger Aspekt.

Content-Slider wie beispielsweise Swiper verzichten gänzlich auf klassische Pfeil-Buttons. Stattdessen wird auf Desktopgeräten eine Gestensteuerung per Maus nachempfunden. Das heißt, du ziehst mit gedrückter Maustaste eine klassische Wischgeste und kannst so die Inhalte des Sliders durchblättern.

Auch der FlexSlider ist sowohl responsiv als auch für Mobilgeräte mit Gestensteuerung geeignet.

Fazit

Content-Slider solltest du – aber das gilt im Webdesign grundsätzlich – immer aus Sicht des Nutzens für deine Besucher einsetzen. Übersichtlichkeit und Bedienbarkeit sind wichtige Aspekte, die du berücksichtigen musst. Viele fertige Content-Slider sind individuell konfigurierbar und dezent in Gestaltung und Animation.

Links zum Beitrag

Quellen:

[1] Nur 1,07 % von 3,7 Millionen Besucher haben den Slider geklickt | Web Archive

[2] Slider im Auto-Play-Modus sind schlecht für Usability | Nielsen Norman

CSS-only Slider

1. Slider im Bilderrahmen (Von Joshua Hibbert. Link geht zu Codepen)
2. Responsiver Image-Slider mit Bildunterschriften (Von Dudley Storey. Codepen-Link)
3. Slider mit Vor- und Zurück-Buttons (Von Avi Kohn. Link geht zu Codepen)

Sonstige Slider

• Sequence.js
• FlexSlider

Beitragsbild von Tom Gainor auf Unsplash. Dieser Beitrag wurde zuletzt am 22.4.22 aktualisiert.