Indikator festlegen

Der Indikator "Festlegen"ist eine Reihe von Punkten, die am unteren Rand des Viewers gerendert werden. Es zeigt die aktuelle Position innerhalb des Satzes an.

CSS-Eigenschaften des Satzindikators

Das Erscheinungsbild des Containers für den Set-Indikator wird mithilfe der folgenden CSS-Klassenauswahl gesteuert:

.s7carouselviewer .s7setindicator

CSS-Eigenschaft

Beschreibung

background-color

Die Hintergrundfarbe im Hexadezimalformat des Satzindikators.

HINWEIS

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

Beispiel: So richten Sie einen Indikator mit einem weißen Hintergrund ein:

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

Das Erscheinungsbild eines einzelnen Satzindikatorpunkts 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 Punkts für den Indikator.

height

Höhe des festgelegten Indikatorpunkts.

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

font-family

Name der Schriftart.

font-size

Schriftgröße.

color

Schriftfarbe.

vertical-align

Vertikale Ausrichtung des Bannerindex.

line-height

Texthöhe für den Bannerindex.

HINWEIS

Die Elemente für die Einstellung 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 Standardelementstatus.

Beispiel: Zum Einrichten der Anzeige im gepunkteten Modus für Desktop-Systeme, die 20 Pixel vom unteren Rand des Viewers entfernt positioniert werden. Nicht ausgewählte Punkte sind schwarz mit 50 % Transparenz, 15 x 15 Pixel mit 7 Pixel abgerundeten Ecken. Die ausgewählten 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

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now