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.

Angenommen, Sie möchten einen Indikator mit weißem Hintergrund einrichten:

.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.

Angenommen, Sie möchten eine Set-Anzeige im gepunkteten Modus für Desktop-Systeme einrichten. Sie möchten, dass sie 20 Pixel vom unteren Rand des Viewers entfernt wird. Und Sie möchten, dass nicht ausgewählte Punkte schwarz mit 50 % Transparenz, 15 x 15 Pixel mit sieben Pixel abgerundeten Ecken sind. Ausgewählte Punkte sind schwarz mit 90 % Transparenz, 18 x 18 Pixel mit neun abgerundeten Ecken. Der Abstand zwischen Punkten beträgt fünf 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