Hauptinhalt

Inhalts-Slider

Der Slider zeigt in vordefinierten Intervallen verschiedene bildhafte Beiträge in Kombination mit kurzen Texten und damit Einstiege in bestimmte Themen an. Slider können bestimmte Beiträge hervorheben und somit Schwerpunkte setzen. Ein Inhalts-Slider kann frei im Hauptinhaltsbereich verwendet werden.

Verwendung

Im Gegensatz zum Highlight-Slider können Inhalts-Slider mehrfach als Gestaltungsmittel eingesetzt werden. Die Befüllung des Sliders sollte mit hochwertigen Bildern und kurzen, prägnanten Texten geschehen. Es besteht zudem die Möglichkeit Videos innerhalb des Sliders einzubinden.

Dabei gibt es zwei unterschiedliche Darstellungsarten von Slidern: 

  • Slides nur mit Bild
  • Slides mit Überschrift, Bild und Text

Slider eignen sich für Themenslides von einem bis maximal sechs (unterschiedlichen) Themen.

Einsatz

Slider: Text und Bild im 0-4-0-Raster
Slider: Text und Bild im 0-4-0-Raster  © Sächsische Staatskanzlei

Verhalten und Gestaltung

Slider: Bild über die volle Breite
Slider im Einsatz - Bildinhalt 100%  © Sächsische Staatskanzlei

Die Slideshow läuft in Intervallen von sechs Sekunden automatisch durch, sofern mehr als ein Slide eingesetzt wurde. Der Nutzer hat die Möglichkeit den automatischen Durchlauf zu stoppen und proaktiv selbst zu navigieren, sowie neu zu starten. Zusätzlich wird die Animation gestoppt, wenn der Nutzer mit der Maus über dem Element steht.
Für die Navigation des Sliders, bei mehr als einem Slide, stehen dem Nutzer zwei Varianten zur Verfügung:

1. Pagination
2. Pfeile zur Steuerung am rechten Rand

Wird dem Slide nur ein Bild hinzugefügt, entsteht kein Slider und es entfallen die Steuerelemente.

Alle Steuerelemente befinden sich auf gleicher Höhe als Abschluss am unteren Rand des Moduls. Die Icons werden in der gewählten Portalfarbe angezeigt, wobei der Hintergrund Grau #f1f3f1 eingefärbt ist und einen Rahmen in der 20 % Portalfarbe hat.

Die inhaltliche Aufteilung des Sliders ist je nach gewähltem Seitenraster fest definiert und sollte lediglich ohne Marginalspalte verwendet werden. 

Der Bildbereich nimmt mindestens 50 % des verfügbaren Bereichs ein. Es können sowohl Bilder als auch Videos platziert werden. Für den Textbereich stehen ebenfalls mindestens 40 % zur Verfügung, wobei entsprechende Außenabstände definiert sind. Zusätzlich besteht die Möglichkeit den Bildbereich auf 100 % zu erweitern, somit entfällt der Textbereich vollständig.

Ein wichtiger Bestandteil der Beiträge innerhalb eines Slides ist immer auch eine aussagkräftige CTA (Call-to-Action) – im Falle dieses Elements ein Button mit aussagekräftigem Linktext für die Interaktion. 

Barrierefreiheit

Tastaturbedienung

Tastenbefehle für Bedienung des Sliders
Taste Funktion
Pfeiltasten links/rechts zurück/vorwärts blättern
Leertaste Automatischen Durchlauf starten/stoppen

Hinweis: Der aktuelle Fokus muss innerhalb des Sliders platziert sein.

zurück zum Seitenanfang