L’indicateur Set est une série de points rendus au bas de la visionneuse. Elle affiche la position actuelle dans la visionneuse.
Propriétés CSS de l’indicateur set
L’aspect du conteneur d’indicateur défini est contrôlé à l’aide du sélecteur de classe CSS suivant :
.s7carouselviewer .s7setindicator
propriété CSS |
Description |
---|---|
arrière-plan-couleur |
Couleur d’arrière-plan au format hexadécimal de l’indicateur défini. |
L’indicateur Set prend en charge le sélecteur d’attributs de mode, que vous pouvez utiliser pour appliquer différents styles aux modes d’opération pointillés et numériques. mode="numeric"
correspond notamment au mode de fonctionnement numérique ; mode="dotted"
correspond à l’état du point par défaut.
Par exemple, supposons que vous souhaitiez configurer un indicateur défini avec un arrière-plan blanc :
.s7carouselviewer .s7setindicator {
background-color: #FFFFFF;
}
L’aspect d’un point indicateur de définition individuel est contrôlé à l’aide du sélecteur de classe CSS. Elle s’applique aux éléments en mode d’opération en pointillé et numérique.
.s7carouselviewer .s7setindicator .s7dot
propriété CSS |
Description |
---|---|
width |
Largeur du point d’indicateur défini. |
height |
Hauteur du point d’indicateur défini. |
margin-left |
Marge gauche en pixels. |
margin-top |
Marge supérieure en pixels. |
margin-right |
Marge droite en pixels. |
margin-bottom |
Marge inférieure en pixels. |
border-radius |
Rayon de la bordure en pixels. |
arrière-plan-couleur |
Couleur d’arrière-plan au format hexadécimal. |
font-family |
Nom de la police. |
font-size |
Taille de la police. |
color |
Couleur de la police. |
alignement vertical |
Alignement vertical de l’index de bannière. |
line-height |
Hauteur de texte de l’index de bannière. |
Les éléments d’indicateur de définition prennent en charge le sélecteur d’attributs state
, qui peut être utilisé pour appliquer différents habillages à différents états de miniature. En particulier, state="selected"
correspond à l’élément actif dans l’ensemble ; state="unselected"
correspond à l’état de l’élément par défaut.
Par exemple, supposons que vous souhaitiez configurer un indicateur défini en mode pointillé pour les systèmes de bureau. Vous souhaitez qu’il soit positionné à 20 pixels à partir du bas de la visionneuse. De plus, vous souhaitez que les points non sélectionnés soient noirs avec une transparence de 50 %, 15 x 15 pixels avec sept coins arrondis. Les points sélectionnés sont noirs avec une transparence de 90 %, 18 x 18 pixels avec neuf pixels aux coins arrondis. L’espacement entre les points est de cinq pixels.
.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;
}