Hauptinhalt

Slider

letzte Aktualisierung der Seite: Version 2.19.0

Die Slider-Komponente existiert in verschiedenen Ausprägungen. Zum einen als Highlight-Slider, der im Kopfbereich einer Webseite Anwendung findet, zum anderen als Content-Slider, der im Inhaltsbereich genutzt wird. Die Art des Sliders wird über die Initialisierungs-Parameter gesteuert. Die Slider-Komponente basiert auf dem Framework Royal Slider http://dimsemenov.com/plugins/royal-slider/. Informationen zur Gestaltung eines Slider sind zu finden unter: Highlight-Slider

JavaScript-Einbindung

Der JavaScript-Bestandteil ist unabhängig davon, ob der Silder als Content- oder als Highlight-Slider eingebunden wird. Hierbei erfolgt die Steuerung über Parameter.

Quellcode

window.additionalComponent.load('slider', {
    component: 'highlight | content',
    el: '[data-component="123654789852"]'
});

Parameter und Attribute

Funktionsaufruf - Zeile 2:

Name Bedeutung Wert Obligatorisch
component Gibt die Art des Sliders an. Der Wert muss entweder auf highlight oder auf content gesetzt werden. highlight | content JA
data-component Attribut des HTML-Knotens, an dem die Slider-Komponente initialisiert wird. textuell, frei definierbar JA

 

HTML-Einbindung des Highlight-Sliders

Quellcode

<div id="highlight" class="highlight">
    <div class="highlight-container">
        <div class="row">
            <div class="highlight-col">
                <div class="slider-default">
                    <div class="sr-only" data-element="focusEls">
                        <h2>Schnelleinstieg der Portalthemen</h2>
                        <ul></ul>
                    </div>
                    <div class="list-slider royalSlider rsSachsen rsHighlight rsAutoPlay"
                         data-slide-autoplay="true"
                         id="slider123654789852"
                         data-component="123654789852">
                            <!--                                        -->
                            <!-- Einbindung von Bild- oder Video-Slides -->
                            <!--                                        -->
                    </div>
                </div>                                    
            </div>
        </div>
    </div>
</div>

Erläuterung

Für die styleguide-konforme Verwendung des Highlight-Sliders muss die Einbindung in einem definierten Rahmen erfolgen. Das nachstehende Markup ist für die Einbindung verpflichtend. Für den Content-Slider darf dieses Markup nicht genutzt werden.

Parameter und Attribute

DIV-Tag - Zeile 10

Name Bedeutung Werte Obligatorisch
data-component Dient der Identifikation mittels JavaScript und muss dem Wert data-component aus dem JavaScript-Code entsprechen. alphanumerischer Wert JA
data-slide-autoplay Gibt an, ob mit Laden der Webseite, der Slider die einzelnen Inhaltsslides der Reihe nach anzeigen soll (true) oder ob der erste Inhaltsslide permanent angezeigt wird (false). true | false NEIN

 

HTML-Einbindung eines Highlight-Slider-Video-Slides

Folgendes Markup zum Einbinden eines Videos im Highlight-Slider. Der Highlight-Slider kann zweigeteilt sein. In diesem Fall wird auf der linken Seite wird Videoinhalt (Video) angezeigt. Im rechten Bereich ist ein Textbereich zu finden. Der Link innerhalb des Textbereichs wird mit dem Klick auf einen der beiden Bereiche aktiviert.

Quellcode

<div class="rsSlideVideo rsSlideNoText" data-element="rsSlide" id="highlight-slide-3938">
    <div class="rsSlideContent">
        <div class="rsText">
            <h2>Überschrift</h2>
            <p>Beschreibungstext</p>
            <a href="/details.html" class="btn btn-primary" title="Linkbezeichnung">Verlinkung zur Detailseite</a>
            </div>
        </div>
        <div class="rsVideo">
            <!--                                   -->
            <!-- Einbindung der Youtube-Komponente -->
            <!--                                   -->
        </div>
    </div>
</div>

Parameter und Attribute

DIV-Tag- Zeile 1:

Name Bedeutung Werte Obligatorisch
class

Gibt das aussehen des Sliders an. Für den Bild-Slider muss rsSlideVideo zwingend erforderlich sein. Zusätzlich kann der Wert rsSlideNoText angegeben werden. Mit der Angabe wird das Video über die volle Breite angezeigt.

CSS-Regel

JA

HTML-Einbindung des Content-Sliders

Im Gegensatz zum Highlight-Slider werden im Content-Slider lediglich Bildinhalte eingebunden. Die Parameter des Rahmens für den Content-Slider sind analog zu denen des Highlight-Sliders. Lediglich das umgebende HTML-Gerüst entfällt.

Quellcode

<div class="slider-default ">
    <div class="list-slider royalSlider rsSachsen rsAutoPlay"
         data-slider="default"
         data-no-preload-imgs
         id="slider-4386"
         data-component="4386"
         data-slide-autoplay="true">
         <!--                            -->                          
         <!-- Einbindung von Bild-Slides -->
         <!--                            -->
    </div>
</div>

HTML-Einbindung des Content-Sliders-Bild-Slides

Quellcode

<div data-element="rsSlide">
    <button id="slide-1" class="rsSlideAnchor">Slide im Vollbildmodus öffnen</button>
    <div class="rsSlideContent">
        <!--                                             -->
        <!-- Markup für die Darstellung im Vollbildmodus -->
        <!--                                             -->
        <div class="rsOnlyFullscreen rsAdditionalInfo">
            <span class="rsSlideCount">
                <span data-slide-count/> / <span data-slide-length/>
            </span>
            <div class="rsSlideShareWrapper"
                         data-toggle="tooltip"
                         data-placement="bottom"
                         title="Bild in sozialen Medien teilen">
                <div id="collapseShare-2721"
                     class="collapse collapseShare"
                     aria-labelledby="headingShare-2721"
                     data-collapse-noscroll>
                    <input type="text"
                           value="http://www.sachsen.de/img/beispiel_bild.jpg" />
                </div>
                <button id="headingShare-2721"
                                class="rsSlideShare"
                                data-toggle="collapse"
                                data-target="#collapseShare-2721"
                                aria-expanded="false"
                                aria-controls="collapseShare-2721"/>
            </div>
            <!-- optional: -->
            <a href="/termin-123456.html" class="btn btn-primary rsButtonDetail">Zum Termin des aktuellen Eintrags</a>
        </div>
        <!--                       -->
        <!-- Bildbeschreibungstext -->
        <!--                       -->     
        <div aria-hidden="true"
             class="rsText rsTextOversized"
             id="rsText-2721">(&copy; Vorname Nachname)
            <p>Bildunterschrift.</p>
        </div>
        <div class="sr-only">(Copyright: Vorname Nachname)
            <p>Bildunterschrift</p>
        </div>
        <!--                                   -->
        <!-- Definition des responsiven Bildes -->
        <!--                                   -->
        <div class="rsImage">
            <noscript>
                <img class="media-object rsImg"
                     src="http://www.sachsen.de/img/beispiel_bild.jpg"
                     alt="Landtag"
                     style="width: 100%" />
            </noscript>
            <img class="media-object hidden-no-js rsImg"
                     src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                      alt="Landtag"
                     data-caption="Bildbeschreibung"
                     data-src="http://www.sachsen.de/img/beispiel_bild.jpg" data-src-maxwidth="675"
                     data-srcset="http://www.sachsen.de/img/beispiel_bild_300x177.jpg 300w,
                                  http://www.sachsen.de/img/beispiel_bild_580x342.jpg 580w,
                                  http://www.sachsen.de/img/beispiel_bild.jpg 675w,
                                  http://www.sachsen.de/img/beispiel_bild.jpg 675w,
                                  http://www.sachsen.de/img/beispiel_bild.jpg 675w,
                                  http://www.sachsen.de/img/beispiel_bild.jpg 675w,
                                  http://www.sachsen.de/img/beispiel_bild.jpg 675w"
                     data-grid-image="true"
                     data-size="size-xs-full"
                     data-rsBigImg="http://www.sachsen.de/img/beispiel_bild.jpg" />
        </div>
    </div>
</div>

Erläuterung

  • Ab Zeile 7 beginnt die Beschreibung des Markups für den Vollbildmodus. Diese Markup ist zu übernehmen.
  • In den Zeilen 33 - 53 findet die Einbindung der responsiven Bilder statt. Dies ist analog der Bild-Slide-Definition aus dem Highlight-Slider. Es ist auf die angepasste Breite der Bilder zu achten.
  • Ab Zeile 57 beginnt der Beschreibungstext für das jeweilige Bild. Der Text, definiert auf Zeile 60, wird als Bildunterschrift angezeigt. Ist dieser Text zu lang, um gut dargestellt zu werden, so findet eine Kürzung des Textes statt. Um Screenreadern jedoch die volle Möglichkeit des Vorlesens zu geben, muss der Text nochmals identisch in Zeile 63 gepflegt werden.

Abhängigkeiten

  • jQuery
  • webs-ot-utils
  • underscore
  • RoyalSlider
  • jQueryEasing
zurück zum Seitenanfang