Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agenturen
    • Digitalagentur finden
    • SEO Agentur finden
    • Social Media Agentur finden
    • Webdesign Agentur finden
    • Werbeagentur finden
    • WordPress Agentur finden
  • Magazin
    • Bloggen
    • Buchhaltung
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • SEO
    • Software
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Menü
  • Beste Agenturen
    • Digitalagentur finden
    • SEO Agentur finden
    • Social Media Agentur finden
    • Webdesign Agentur finden
    • Werbeagentur finden
    • WordPress Agentur finden
  • Magazin
    • Bloggen
    • Buchhaltung
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • SEO
    • Software
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Suche

Schicke und kostenlose Slider, ganz ohne JavaScript

  • Aktualisiert am 10. Mai 2023
  • von Markus Seyfferth
  • Webdesign
  • 2 Kommentare

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.

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]

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.

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:

Statistiker über die Nutzung von Slidern.
Von den 1 % der 3,7 Mio. Besuchern haben 89% den ersten Slider geklickt. Die Slider auf Position 2 bis 5 wurden nur jeweils 2 bis 3 % geklickt.

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.

Splide Slider in TypeScript.
Link zu SplideJS

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 mit Bilderrahmen

Ein Bilderrahmen mit Slider-Funktion.
Link zum CodePen.

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

Vorschau zu einem CodePen, bei welchem Bilder autoamtisch von rechts nach links scrollen.
Link zum CodePen

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

Slider mit links und rechts-Pfeilen zum Navigieren.
Link zum CodePen

Ein CSS-only-Slider von John Motyl Jr.

Ein Slider mit Vor- und Zurück-Buttons

CSS-only Slider ohne JavaScript und mit Navigationspfeilen nach links und rechts..
Link zum CodePen

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.

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.

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

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.

Markus Seyfferth

Markus Seyfferth

ist seit 2019 Geschäftsführer & WordPress-Entwickler bei Dr. Web. Zuvor war er sechs Jahre lang Vorstand des Smashing Magazine, im Rahmen dessen er u.a. das Online-Marketing, die Betreuung der Werbekunden sowie diverse Online-Projekte geleitet hat.

Inhaltsverzeichnis

Dr. Web Agenturpartner in Berlin

Edit Content
Johda Webdesign Berlin Logo.

JOHDA Webdesign

Ich entwickle und veröffentliche seit mehr als zehn Jahren professionelle Webseiten für kommerzielle Anwendungen, sowohl für Unternehmen als auch für öffentlich finanzierte Projekte. Sie zeichnen sich jeweils durch eine übersichtliche Struktur und eine klare Nutzerführung aus. Daneben durfte ich bereits einige prominente Brands gestalten, zum Beispiel für die Landeshauptstadt München oder für das Land Berlin. Bei JOHDA kümmere ich mich neben der Webentwicklung um Fotografie und Typografie.

Inhaber der Webdesign Agentur Johda Johannes Paul Reimann.
— Johannes Paul Reimann ,
Inhaber
Alle Webdesign-Agenturen →

Lust auf mehr?

The Empire Strikes Back. Further.

Microsoft Designer to the people: KI Power Webdesign und Grafikdesign?

Ein Webdesign selbst erstellen? Ist bei mir schon ewig her. 2006 muss das gewesen sein. Ich durfte für eine Rechtsanwaltskanzlei ran. Typische Erstaufträge. Freundes- und Bekanntenkreis abgrasen eben. Der damalige Freund einer Freundin arbeitete dort und brachte mich ins Spiel.
Doch lieber Lotto spielen und so reich werden?

Diese 8 Tipps sollte jeder Webentwickler kennen

Sie sind Webentwickler oder möchten einer werden? Hier kommen 8 Tipps wie aus dem Lehrbuch. Doch wehe, wenn der Alltag dazwischen grätscht. Lieber doch Lotto spielen?

Alles zu CSS Background-Image (großer Leitfaden mit Codebeispielen)

Mit CSS Background-Image (deutsch: CSS-Hintergrundbild) kannst du einem Element ein Hintergrundbild, Hintergrundvideo, eine Hintergrundfarbe oder einen Farbverlauf zuweisen.

2 Antworten

  1. Tom sagt:
    14. Mai 2020 um 2:02 Uhr

    Unter „sonstige Slider“ würde ich noch Owl Carousel (https://owlcarousel2.github.io/OwlCarousel2/)
    und v.a. den Slick Slider (https://kenwheeler.github.io/slick/) erwähnen.

    Antworten
    1. Markus Seyfferth sagt:
      22. April 2022 um 9:50 Uhr

      Update: Das Owl Carousel wird mittlerweile nicht mehr unterstützt. Es gibt aber einen Nachfolger, nämlich den Tiny Slider: https://github.com/ganlanyuan/tiny-slider

Schreibe einen Kommentar Antworten abbrechen

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

Hier Klicken
Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden