Dokumentation Template 3.0

Seitenelement: Slider

Beim Slider (Bildwechsler) erscheinen nacheinander verschiedene Bilder optional mit einem weiterführenden Link zu einer anderen Seite.

Ziehen Sie einfach Ihr Browser-Fenster auf die Größe eines Smartphones oder Tablets, um zu testen, wie ein Element in der mobilen Ansicht mit dem Smartphone oder auf dem Tablet aussieht.

Slider

Aussehen

Mit dem Slider haben wir die Möglichkeit, mehrere Bilder hintereinander abwechselnd erscheinen zu lassen. Nach wenigen Sekunden wird automatisch zum nachfolgenden Bild gewechselt. Das Auswechseln können wir manuell stoppen oder starten, indem wir am unteren Bildrand auf die zwei Striche (ähnlich der Pausetaste) oder das Play-Zeichen klicken. Durch Anklicken der Pfeile rechts und links an den Bildseiten, wechselt der Slider zum nachfolgenden oder vorherigen Bild.

Jedes Bild kann optional einen Link enthalten, dieser wird in einem blauen Kreis rechts unten im Bild dargestellt. Die Überschrift wird fett ausgespielt. Der gesamte Textinhalt im blauen Kreis darf nicht zu lang sein. Wir beschränken uns auf eine kurze, knackige Überschrift und wenige Worte zur Beschreibung des Linkinhalts.

Funktion

Der Slider eignet sich besonders gut für die visuelle Darstellung von Informationen auf einer Startseite. Er ist für visuell wirksame Kernaussagen und Entwicklungen der Universität Stuttgart gedacht. Die Bild- und Textgestaltung sollte anspruchsvoll sein.

Der Slider wird auf der Startseite der Universität anstelle des Intro-Elements genutzt. Aber Achtung: Befindet sich statt dem Intro-Element ein Slider auf der Webseite, dann müssen wir Title und Description von Hand bei den Seiteneigenschaften eingeben.

Der Slider geht über die gesamte Seitenbreite, 12 cols.

Für großformatige Bilder ist diese Variante ohne Kreis gedacht. Sie unterscheidet sich optisch von der Standard-Variante darin, dass sie keine Texte und Farbflächen hat. (c)
Für großformatige Bilder ohen Textinformationen ist diese Variante ohne Kreis gedacht.

Wird ein Slider als Alternative zu einer Fotostrecke eingesetzt, kann auch eine Variante ohne Farbflächen und Texte verwendet werden.

Voraussetzungen
  • Die Motive sind selbsterklärend.
  • Für die Suchmaschinen-Optimierung und die Barrierefreiheit enthalten die Slider-Felder „Titel“ und „Beschreibung“ verständliche und sinnvolle Inhalte.
  • Bei Schriften im Bild achten Sie auf ausreichende Farbkontraste für die Barrierefreiheit.
Aussehen

Die Unterschiede zur Standard-Version sind: In der Desktop-Ansicht fehlt der Kreis, in responsiven schmaleren Ausgabevarianten fehlt der blaue Balken. Es wird kein Text ausgegeben. Wenn das Feld „Link“ befüllt ist, wird die komplette Fläche des Bildes klickbar.

Konfiguration

Die Nur-Bild-Variante des großen Sliders erhalten Sie als Seiten-Element-Einstellung. Fahren Sie über den Bearbeitungspunkt des Sliders auf einer Containerseite. Klicken Sie im erscheinenden Menü auf das Zahnrad-Zeichen. Wählen Sie bei Einstellungen die Augabe-Variante „ohne Kreis“.

Der Slider ist für repräsentative Startseiten gedacht und entsprechend groß dimensioniert. Wenn Sie eine einfache Bildstrecke auf Ihren Seiten haben möchten, sollten Sie die Slider-Funktion des flexiblen Textblocks verwenden.

Kleiner Slider

Ein gutes Beispiel für einen Slider, der statt eines Intro-Elements verwendet wird, finden Sie auf der Startseite der Universität Stuttgart.

Beispiel für einen Slider

Zum Seitenanfang