Slider
letzte Aktualisierung der Seite: Version 2.26.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 lediglich über die Position im Quellcode 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.
Quellcode
window.additionalComponent.load('slider', {
component: 'highlight',
el: '[data-component="123654789852"]'
});
Parameter und Attribute
Funktionsaufruf - Zeile 2:
| Name | Bedeutung | Wert | Obligatorisch |
|---|---|---|---|
component |
Gibt die Art des Sliders an. Der Wert muss auf highlight gesetzt werden. |
highlight | 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 hidden-print">
<div id="slider-focus-list" class="sr-only" data-element="focusEls">
<h2>Schnelleinstieg der Portalthemen</h2>
<ul></ul>
</div>
<aside class="list-slider royalSlider rsSachsen rsHighlight rsAutoPlay"
data-slider="default"
data-slide-autoplay="true"
id="slider123654789852"
data-component="123654789852">
<!-- -->
<!-- Einbindung von Bild- oder Video-Slides -->
<!-- -->
</aside>
</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
ASIDE-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
<article 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>
</article>
Parameter und Attribute
ARTICLE-Tag- Zeile 1:
| Name | Bedeutung | Werte | Obligatorisch |
|---|---|---|---|
class |
Gibt das aussehen des Sliders an. Für den Bild-Slider muss |
CSS-Regel |
JA |
HTML-Einbindung des Content-Sliders
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 rsHighlight rsAutoPlay"
data-slider="default"
data-no-preload-imgs
id="slider-4386"
data-component="4386"
data-slide-autoplay="true">
<!-- -->
<!-- Einbindung von Bild- oder Video-Slides -->
<!-- -->
</div>
</div>
HTML-Einbindung des Bild-Slides
Quellcode
<div data-element="rsSlide rsSlideNoText" data-slide-backdrop="http://www.sachsen.de/img/beispiel_bild_1450.jpg">
<div class="rsSlideContent">
<!-- -->
<!-- Bildbeschreibungstext -->
<!-- -->
<div class="rsText"
id="rsText-2721">(© 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="Beispielhafte alternative Bildbeschreibung"
style="width: 100%" />
</noscript>
<img class="media-object hidden-no-js rsImg"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
alt="Beispielhafte alternative Bildbeschreibung"
data-caption="Bildbeschreibung"
data-src="http://www.sachsen.de/img/beispiel_bild_1450.jpg" data-src-maxwidth="1450"
data-srcset="http://www.sachsen.de/img/beispiel_bild_365.jpg 365w,
http://www.sachsen.de/img/beispiel_bild_440.jpg 440w,
http://www.sachsen.de/img/beispiel_bild_570.jpg 570w,
http://www.sachsen.de/img/beispiel_bild_855.jpg 855w,
http://www.sachsen.de/img/beispiel_bild_1050.jpg 1050w,
http://www.sachsen.de/img/beispiel_bild_1250.jpg 1250w,
http://www.sachsen.de/img/beispiel_bild_1450.jpg 1450w"
data-grid-image="true"
data-size="size-xs-full"
data-rsBigImg="http://www.sachsen.de/img/beispiel_bild_1450.jpg" />
<span class="media-copy">© Vorname Nachname</span>
</div>
</div>
</div>
Erläuterung
- In Zeile 1 wird optional ein Bild angeboten, das als verschwommenes Hintergrundbild des Slides genutzt wird, sollte die Höhe des Slides die Höhe des Bildes übersteigen.
- Ab Zeile 6 beginnt die Beschreibung des Markups für den Vollbildmodus Beschreibungstext neben dem Bild. Dieser wird nur angezeigt, wenn in Zeile 1 die Klasse
rsSlideNoTextentfernt wird. - In den Zeilen 38 - 60 findet die Einbindung der responsiven Bilder statt.
Abhängigkeiten
- jQuery
- webs-ot-utils
- underscore
- RoyalSlider
- jQueryEasing
