Anzeige einstellen

Set Indicator ist eine Reihe von Punkten, die unten im Viewer gerendert werden. Sie zeigt die aktuelle Position innerhalb des Sets an.

CSS-Eigenschaften des Set Indicators

Das Erscheinungsbild des set-Indikator-Containers wird mit der folgenden CSS-Klassenauswahl gesteuert:

.s7carouselviewer .s7setindicator

CSS-Eigenschaft

Beschreibung

background-color

Die Hintergrundfarbe im hexadezimalen Format des Set-Indikators.

HINWEIS

Der Festlegen-Indikator unterstützt die Modusattributauswahl, mit der Sie verschiedene Stile für gepunktete und numerische Vorgangsmodi anwenden können. Insbesondere entspricht mode="numeric" dem numerischen Betriebsmodus; mode="dotted" entspricht dem Standardpunktstatus.

Beispiel: Zum Einrichten eines Set-Indikators mit weißem Hintergrund:

.s7carouselviewer .s7setindicator { 
 background-color: #FFFFFF; 
}

Das Erscheinungsbild eines einzelnen festgelegten Anzeigepunkts wird mit der CSS-Klassenauswahl gesteuert. Sie gilt für Elemente sowohl im gepunkteten als auch im numerischen Betriebsmodus.

.s7carouselviewer .s7setindicator .s7dot

CSS-Eigenschaft

Beschreibung

width

Breite des festgelegten Anzeigepunkts.

height

Höhe des festgelegten Anzeigepunkts.

margin-left

Linker Rand in Pixel.

margin-top

Oberer Rand in Pixel.

margin-right

Rechter Rand in Pixel.

margin-bottom

Unterer Rand in Pixel.

border-radius

Rahmenradius in Pixel.

background-color

Hintergrundfarbe im hexadezimalen Format.

Schriftfamilie

Name der Schriftart.

Schriftgröße

Schriftgröße.

color

Schriftfarbe.

vertikale Ausrichtung

Vertikale Ausrichtung des Bannerindex.

line-height

Texthöhe für den Bannerindex.

HINWEIS

Die Festlegen-Indikatorelemente unterstützen die Attributauswahl state, mit der verschiedene Skins auf verschiedene Miniaturansichten angewendet werden können. Insbesondere entspricht state="selected" dem aktuellen Element im Satz; state="unselected" entspricht dem standardmäßigen Elementstatus.

Beispiel: Zum Einrichten einer Set-Anzeige im gepunkteten Modus für Desktop-Systeme, die 20 Pixel vom unteren Rand des Viewers entfernt werden sollen. Nicht ausgewählte Punkte sind schwarz mit 50 % Transparenz, 15 x 15 Pixel mit 7 Pixel abgerundeten Ecken. Ausgewählte Punkte sind schwarz mit 90 % Transparenz, 18 x 18 Pixel mit 9 Pixel abgerundeten Ecken. Der Abstand zwischen Punkten beträgt 5 Pixel.

.s7carouselviewer.s7mouseinput .s7setindicator { 
 bottom: 20px; 
} 
.s7carouselviewer.s7mouseinput .s7setindicator[mode='dotted'] .s7dot{ 
 width:15px; 
 height:15px; 
 margin-left:2.5px; 
 margin-right:2.5px; 
 margin-top:2.5px; 
 margin-bottom:2.5px; 
} 
.s7carouselviewer.s7mouseinput .s7setindicator[mode='dotted'] .s7dot[state='selected'] {  
 width:18px; 
 height:18px; 
 background-color: #000000; 
 opacity: 0.9; 
 border-radius:9px; 
} 
.s7carouselviewer.s7mouseinput .s7setindicator[mode='dotted'] .s7dot[state='unselected'] {  
 width:15px; 
 height:15px; 
 background-color: #000000; 
 opacity: 0.5; 
 border-radius:7px; 
}

Auf dieser Seite