Indikator festlegen set-indicator

Ein Indikator für ein Set ist eine Reihe von Punkten, die am unteren Rand des Viewers gerendert werden. Zeigt die aktuelle Position innerhalb des Sets an.

CSS-Eigenschaften des festgelegten Indikators

Das Erscheinungsbild des set indicator-Containers wird mit dem folgenden CSS-Klassenselektor gesteuert:

.s7carouselviewer .s7setindicator

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

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

Das Erscheinungsbild eines einzelnen Punkts für die Set-Anzeige wird mit dem CSS-Klassenselektor gesteuert. Dies gilt sowohl für Elemente im gepunkteten als auch für numerische Betriebsarten.

.s7carouselviewer .s7setindicator .s7dot

Angenommen, Sie möchten für Desktop-Systeme einen Indikator im gepunkteten Modus einrichten. Sie möchten, dass sie 20 Pixel vom unteren Rand des Viewers entfernt positioniert wird. Außerdem sollen nicht ausgewählte Punkte schwarz mit 50 % Transparenz, 15 x 15 Pixel mit sieben Pixel mit abgerundeten Ecken sein. Ausgewählte Punkte sind schwarz mit 90 % Transparenz, 18 x 18 Pixel mit neun Pixel 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;
}