Anzeige einstellen set-indicator
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 festgelegten Indikators
Das Erscheinungsbild des set-Indikator-Containers wird mit der folgenden CSS-Klassenauswahl gesteuert:
.s7carouselviewer .s7setindicator
mode="numeric" dem numerischen Betriebsmodus; mode="dotted" 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
state”-Attributauswahl, mit der verschiedene Skins auf unterschiedliche Miniaturansichten angewendet werden können. Insbesondere entspricht state="selected" dem aktuellen Element im Satz; state="unselected" 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;
}