Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » Website erstellen » Schicke und kostenlose Slider, ganz ohne JavaScript

Schicke und kostenlose Slider, ganz ohne JavaScript

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • 2 Kommentare
Lesedauer: 6 Minuten
  • von Markus Seyfferth
  • 27. Januar 2020

Inhaltsverzeichnis

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]

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.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Optimerch Agentur Logo Dortmund.

Optimerch GmbH

Dortmund

Wee Media Agentur Logo.

Wee Media | Webdesign Agentur

Dernbach

Klickbeben Webdesign Agentur Innsbruck Logo.

Webagentur klickbeben

Innsbruck

Profilbild Dominik Kienzle.

Dominik Kienzle

München

Carmen Hurst Webdesign Bad Homburg Logo.

Carmen Hurst | Webdesign

Bad Homburg

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Die passende Digitalagentur finden: Das solltest Du beachten

Wir unterstützen Dich bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Mitarbeiter einer WordPress-Agentur mit einer Tasse Kaffee im Vordergrund.
WordPress

WordPress — eine gute Wahl für Ihre Unternehmenswebsite?

Hier finden Sie ein ausführliches FAQ zu WordPress als Entscheidungshilfe und eine Auswahl von professionellen WordPress Agenturen.

→

2 Antworten zu „Schicke und kostenlose Slider, ganz ohne JavaScript“
— was ist Deine Meinung?

  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

      Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?

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
  • Wuppertal
  • Würzburg
  • Zürich
  • 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
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑