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.

Keen-Slider

Ein Slider ohne jQuery

Fangen wir an mit einem Tool, für das du noch nicht einmal coden können musst. Für Leute, denen das händische Coden nicht so liegt, bietet sich das Tool von cssslider.com ganz wunderbar an. Du ziehst mehrere Bilder in die Benutzeroberfläche, wählst den Zoom und das Skin aus und schon erstellt dir das Tool den notwendigen Code für die Webseite. Die Anwendung ist kostenlos für Windows und Mac erhältlich.

Ein Slider mit Bilderrahmen

[codepen_embed height=”500″ theme_id=”light” slug_hash=”abzMMOJ” default_tab=”result” user=”drweb”]See the Pen Pure CSS Featured Image Slider by Joshua Hibbert (@drweb) on CodePen.[/codepen_embed]

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

[codepen_embed height=”400″ theme_id=”light” slug_hash=”KKwEEpK” default_tab=”result” user=”drweb”]See the Pen HTML5 CSS-Driven Responsive Image Slider With Captions by Dr. Web (@drweb) on CodePen.[/codepen_embed]

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

[codepen_embed height=”500″ theme_id=”light” slug_hash=”xxbBBwr” default_tab=”result” user=”drweb”]See the Pen Attempt #1 CSS3 Clickable Slider by Dr. Web (@drweb) on CodePen.[/codepen_embed]

Ein CSS-only-Slider von John Motyl Jr.

Ein Slider mit Vor- und Zurück-Buttons

[codepen_embed height=”500″ theme_id=”light” slug_hash=”povYYyJ” default_tab=”result” user=”drweb”]See the Pen CSS image slider w/ next/prev btns & nav dots by Dr. Web (@drweb) on CodePen.[/codepen_embed]

Ein reiner CSS-Image-Slider mit Vor- und Zurück-Buttons, mit
Navigationspunkten und 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. 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 und Link zum Beitrag

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. Hier sind ein paar:

Links zum Beitrag

CSS-only Slider

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

Sonstige Slider

• Sequence.js
• Swiper
• FlexSlider

Beitragsbild von Tom Gainor auf Unsplash.