Toolbar-Menu
 
Sie sind hier: Start Komponenten
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.

  • 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">
        <figure>
            <img class="orbit-image" src="img/slider/Algen_930x340.jpg"
                 alt="Ein Schwan schwimmt auf einem algenverseuchten Teich."
                 title='Bild "Schwan im Algenteppich"'>
            <figcaption class="orbit-caption">
                <h2>Schwan in Not</h2>
                <p>Und es schmeckt ihm trotzdem..</p>
            </figcaption>
        </figure>
    </li>
    <li class="active">
        <figure>
            <img class="orbit-image" src="img/slider/flower_930x340.jpg"
                 alt="Ein gelbes Gänseblümchen auf einem vertrockneten Boden."
                 title='Bild "Bellis perennis"'>
            <figcaption class="orbit-caption right">
                <h2><a href"#">Ein gelbes Gänseblümchen</a></h2>
                <p>auf einem vertrockneten <a href"#">Boden.</a></p>
            </figcaption>
        </figure>
    </li>
    <li>
        <figure>
            <a href="#" title="Seite neue laden.">
                <img class="orbit-image" src="img/slider/tierseuchen_930x340.jpg" alt="Eine erkrankte Möwe.">
            </a>
        </figure>
    </li>
</ul>

  • Benötigtes Javascript

     
    <script type="text/javascript" src="style.brandenburg.de/2_3/js/vendors/2jquery.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_3/js/vendors/3jquery.mobile-events.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_3/js/vendors/what-input.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_3/js/vendors/4foundation5.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_3/js/vendors/5foundation.min.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_3/js/visualComponents/slider.js"></script>
 <script type="text/javascript" src="style.brandenburg.de/2_3/js/finalApp.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