Ein Slider ist ein Website-Element, das mehrere Inhalte, Bilder oder Teaser in einem Bereich abwechselnd anzeigt, wobei der Wechsel automatisch oder durch Nutzerinteraktion ausgelöst wird.
Was bedeutet das?
Slider werden auch als Karussell oder Image-Slider bezeichnet. Sie sind besonders im Header-Bereich von Websites beliebt: Mehrere Bilder oder Teaserkarten werden der Reihe nach eingeblendet, oft mit sanften Überblendungen oder Schiebe-Animationen. Der Nutzer kann durch Pfeile oder Punkte-Navigation manuell durch die Folien blättern, oder der Slider wechselt automatisch in festgelegten Intervallen.
In WordPress werden Slider meist über Plugins realisiert. Bekannte Plugins sind Slider Revolution, Smart Slider 3 und MetaSlider. Diese Plugins bieten Drag-and-Drop-Editoren, Animationsoptionen, Responsiveness-Einstellungen und Shortcodes zur Einbettung in Seiten. Page-Builder wie Elementor oder WPBakery enthalten eigene integrierte Slider-Elemente, die keinen zusätzlichen Plugin-Install erfordern.
Technisch besteht ein Slider aus einem Container mit einem sichtbaren Ausschnitt (Viewport) und mehreren Folien (Slides), die durch CSS-Positionierung und JavaScript-Animationen gesteuert werden. Moderne Slider sind responsive und passen die Bild- und Textgrösse automatisch an verschiedene Bildschirmbreiten an. Für die Zugänglichkeit (Accessibility) ist wichtig, dass automatisch wechselnde Slider eine Pause-Funktion bieten und per Tastatur bedienbar sind, da bewegte Inhalte für Nutzer mit Gleichgewichts- oder Konzentrationsproblemen störend sein können.
Im professionellen Webdesign ist der Header-Slider als erstes visuelles Element kritisch: Er liegt im sichtbaren Bereich beim ersten Laden (Above the Fold) und beeinflusst den Largest Contentful Paint (LCP), eine wichtige Core-Web-Vitals-Metrik. Schwere Slider-Plugins mit vielen ungenutzten Animationen und grossen Bilddateien sind eine häufige Ursache für schlechte PageSpeed-Werte.
Beispiel aus der Praxis
Eine Unternehmenswebsite zeigt im Hero-Bereich der Startseite drei wechselnde Teaser: den Hauptservice, ein aktuelles Angebot und einen Kundenstimmen-Block. Jede Folie enthält ein Hintergrundbild (1920x1080px), einen Headline-Text und einen Call-to-Action-Button. Der Slider wechselt alle 5 Sekunden automatisch. Auf Mobilgeräten werden Bilder auf 400px reduziert und der Text kleiner dargestellt.
Wird der Slider mit nicht komprimierten Vollformat-JPEGs betrieben, steigen Ladezeiten auf mehrere Sekunden. Die Lösung: Bilder in WebP-Format konvertieren, auf maximal 200 KB pro Bild komprimieren und nur das erste Slide-Bild beim Initialladen laden (Lazy Loading für die weiteren Folien). So bleibt der LCP-Wert unter 2,5 Sekunden und der PageSpeed-Score hoch.
Häufiger Fehler
Viele WordPress-Websites laden das vollständige Slider-Plugin einschliesslich aller Animationen und Skripte auch auf Seiten, wo kein Slider vorhanden ist. Ein seriöses Slider-Plugin sollte Skripte nur dort laden, wo der Slider tatsächlich eingebettet ist. Ausserdem wird oft vergessen, Alt-Texte für Slider-Bilder zu setzen: Aus SEO- und Accessibility-Sicht sind sprechende Alt-Texte für jedes Bild Pflicht, auch im Slider-Kontext.