Schicke und kostenlose Slider, ganz ohne JavaScript

Facebook
XING
Twitter
Antilopenschlucht - Nord-Arizona
Vieles, was einst nur mit Flash oder JavaScript möglich war, lässt sich heutzutage mittels CSS realisieren. Heute zeige ich dir einige kostenlose Slider, für deren Bearbeitung du lediglich etwas HTML und CSS benötigst. Möglich gemacht wird dies durch CSS-Animationen und -Transitions.
. . . Reklame

Möchten Sie ihr Geld in der WordPress-Welt verdienen? Dann bietet sich anstatt eines HTML-Editors der Einsatz eines Page Builders wie Elementor an. Mit diesem Tool werden Sie das Ziel professionelle Websites zu erstellen wesentlich schneller erreichen.

. . .

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

Bildschirmfoto - Produktdesign
Das Elementor-Slider-Widget kann man natürlich auch bebildern.

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

Logo - Produktdesign
Keen ist ein HTML-Touch-Slider-Karussell, das mit Code-Schnipseln für React, Vue, Angular und Vanilla JS daherkommt.

Ein Slider ohne jQuery

Django - Website

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.

Anzeige

Ein Slider mit Bilderrahmen

See the Pen Pure CSS Featured Image Slider by Joshua Hibbert (@drweb) on CodePen.light

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

See the Pen HTML5 CSS-Driven Responsive Image Slider With Captions by Dr. Web (@drweb) on CodePen.light

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

See the Pen Attempt #1 CSS3 Clickable Slider by Dr. Web (@drweb) on CodePen.light

Ein CSS-only-Slider von John Motyl Jr.

. . . Reklame

Schnelle Ladezeiten sind absolut wichtig. Google und der Leser honorieren das. Mit GeneratePress machen Sie Ihre WordPress-Website zum Rennboliden. Jetzt kostenlos installieren.

. . .

Ein Slider mit Vor- und Zurück-Buttons

See the Pen CSS image slider w/ next/prev btns & nav dots by Dr. Web (@drweb) on CodePen.light

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.

content-slider_fontshop

Fontshop: Übersichtlicher Content-Slider mit großzügigen Bildern und wenig Text

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.

. . . Reklame

Unzufrieden mit dem Hoster, oder neue Website am Start? Setzen Sie auf Kinsta, dem Managed Hosting Provider. Kostenlose Demo.

. . .

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.

content-slider_stern
stern.de: Content-Slider mit drei Inhalten

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.

content-slider_swiper
Content-Slider Swiper

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.

content-slider_flex-slider
Content-Slider FlexSlider

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

Beitragsbild von Tom Gainor auf Unsplash.

Eine Antwort

Schreibe einen Kommentar

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

On Key

Related Posts

Eine Frau mit Latte

Webdesign für eine erfolgreiche Website

Die Website ist die Visitenkarte Ihres Unternehmens. Doch sie ist noch viel mehr als das. Sie ist zentrales Kommunikationsinstrument und erste Anlaufstelle für potenzielle Neukunden. Diese erwarten aussagekräftige Inhalte und ein nutzerfreundliches Design. Wer bei der Onlinepräsenz Professionalität walten lässt, macht auf sich aufmerksam und gewinnt mehr Kunden.

Eine Fußgängerzone im späten Sonnenschein.

So funktioniert User-Testing für den kleinen Geldbeutel

Ganz ehrlich: Sie wissen schon lange, dass User-Feedback essentiell ist, doch das Testen mit echten Usern kommt aus Zeit- und Kostengründen immer zu kurz? Mit dem Feedback Ihrer Nutzer decken Sie Probleme auf, bevor diese zum Problem werden. Heute zeige ich Ihnen, wie Benutzertests auch ohne großes Budget gelingen.