Toolbar-Menu
 
Sie sind hier: Start Komponenten
Theme "darkBlueTurquoise" erfolgreich aktiviert
Um das Theme zu aktivieren, muss folgende CSS-Datei eingebunden werden:


<!-- 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/darkBlueTurquoise.css"/>
5. Komponenten
  1. 5.1 Accordion
  2. 5.2 Pictures
  3. 5.3 Formulare
  4. 5.4 Icons
  5. 5.5 Kalender
  6. 5.6 Listen
  7. 5.7 Mega-Menü
  8. 5.8 Mobile-Menü
  9. 5.9 Meldungen
  10. 5.10 Slider
  11. 5.11 Tabellen
  12. 5.12 Tabs (Horizontal)
  13. 5.13 Tabs (Vertikal)
  14. 5.14 Teaser
  15. 5.15 Tonaufnahmen
  16. 5.16 Videos
  17. 5.17 Externe Inhalte
Platzierung
4.2.1
4.2.2
4.2.3
 
4.2.4
4.2.5
4.3.1
4.3.2
4.3.3
4.4.1
4.4.2
4.4.3
4.4.4

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.

  • 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.
  • Raum für Familien - Ob bei Krippenplätzen, Gemeinden, in Universitäten, in der Pflege oder in der Freizeit, Familien finden inBrandenburg beste Bedingungen.
  • Horst Krause, Schauspieler - \

  • Quelltext
    Quelltext kopieren 
    <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

Seite drucken