<!-- CSS link (HTML header), replace with "https://style.brandenburg.de/cdn/bb/css/app.css" -->
<link type="text/css" rel="stylesheet" href="https://style.brandenburg.de/cdn/bb/css/themes/mediumGreen.css"/>
5. Komponenten
- 5.1 Accordion
- 5.2 Pictures
- 5.3 Formulare
- 5.4 Icons
- 5.5 Kalender
- 5.6 Listen
- 5.7 Mega-Menü
- 5.8 Mobile-Menü
- 5.9 Meldungen
- 5.10 Slider
- 5.11 Tabellen
- 5.12 Tabs (Horizontal)
- 5.13 Tabs (Vertikal)
- 5.14 Teaser
- 5.15 Tonaufnahmen
- 5.16 Videos
- 5.17 Externe Inhalte
Platzierung
5.10 Slider
Slider ermöglichen verschiedene Inhalte platzsparend in einem Raum darzustellen. Dabei wird der Inhalt selbstständig in einem bestimmen Zeitraum geändert. Somit bietet ein Slider die Möglichkeit, auf Beiträge zu verweisen. Vorzugsweise kommen Bilder zum Einsatz. Sofern Text verwendet wird, ist dieser auch als HTML-Textelement zu implementieren. Die Besucherinnen und Besucher sollen die Möglichkeit haben, selbstständig über die Interaktivität des Sliders zu entscheiden. Dazu gehört vor allem das Anhalten des Sliders. Für die Reihenfolge beim Laden der gesamten Seite ist zu beachten, dass die Slider-Komponente der Wichtigkeit nach dem Hauptinhalt nachgestellt ist. Sämtliche Bilder und Inhalte beginnen folglich erst nach der vollständigen Anzeige des Hauptinhalts zu laden.
-
Quelltext
<ul class="example-orbit" data-options="timer: true; bullets:false; pause_on_hover: false; timer_speed: 9000; slide_number_text: von; next_on_click: false;" data-orbit> <li class="active"> <img class="orbit-image" src="style.brandenburg.de/img/slider/fachkraefte1.jpg" alt="Raum für Karriere - Brandeburger Unternehmen suchen Fachkräfte. Viele Arbeitsplätze sind in den letzten Jahren entstanden und eröffnen neue Chancen. Zeit sich umzuschauen." title='Bild "Raum für Karriere"'> </li> <li> <img class="orbit-image" src="style.brandenburg.de/img/slider/fachkraefte2.jpg" alt="Raum für Familien - Ob bei Krippenplätzen, Gemeinden, in Universitäten, in der Pflege oder in der Freizeit, Familien finden inBrandenburg beste Bedingungen." title='Bild "Raum für Familien"'> </li> <li> <img class="orbit-image" src="style.brandenburg.de/img/slider/horst_krause-930x340.jpg" alt="Horst Krause, Schauspieler - \"In Brandenburg bin ich auch zu Hause. Es grüßt Sie herzlich Polizeihauptmeister Krause.\"" title="Bild \"Horst Krause, Schauspieler\""> </li> </ul>
-
Benötigtes Javascript
<script type="text/javascript" src="style.brandenburg.de/js/vendor/jquery.min.js"></script> <script type="text/javascript" src="style.brandenburg.de/js/vendor/jquery.mobile-events.min.js"></script> <script type="text/javascript" src="style.brandenburg.de/js/vendor/what-input.min.js"></script> <script type="text/javascript" src="style.brandenburg.de/js/foundation5.min.js"></script> <script type="text/javascript" src="style.brandenburg.de/js/foundation.min.js"></script> <script type="text/javascript" src="style.brandenburg.de/js/visualComponents/slider.js"></script> <script type="text/javascript" src="style.brandenburg.de/js/app.js"></script>
Aufbau
- Der Text muss als Metainformation eingetragen werden.
- Hyperlinks müssen als solche erkennbar und anklickbar sein.
- Die Aktionselemente vor - und zurück müssen vorhanden sein.
Spezifische Anforderungen
- Der Slider muss durch die Nutzerinnen und Nutzer anhaltbar sein.
- Die Anzeigedauer muss einstellbar sein.
- Die Anzeige pro Bild sollte mindestens 9 Sekunden betragen.
- Die Bilder werden zeitlich nach der Seitenhauptinformation geladen. Zudem darf der Ladevorgang erst dann beginnen, wenn die Seitenhauptinformation vollständig gerendert wurde, d.h., dass die Seiteninformation lesbar ist.
Barrierefreiheit
- Enthält ein Slider-Element einen Text, sollte dieser als Metainformation vorhanden sein, sodass er mit Hilfe eines Screen-Readers ausgelesen werden kann. Das gilt auch für Texte in Bildern (siehe Abbildung).
- Der Slider muss immer anhaltbar sein.
Aktionsverhalten
Die Navigation links und rechts muss immer großflächig und für den mobilen Einsatz optimiert sein.
Responsive Design
keine Beschränkungen