DocumentationGuide de référence des visionneuses Dynamic Media

Définir l’indicateur set-indicator

Last update: Fri Aug 15 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Rubriques :

Créé pour :

  • Développeur
  • Utilisateur ou utilisatrice

Définir l’indicateur est une série de points affichés en bas de la visionneuse. Elle affiche la position actuelle dans l’ensemble.

Propriétés CSS de l’indicateur défini

L’aspect du conteneur d’indicateurs définis est contrôlé avec le sélecteur de classe CSS suivant :

.s7carouselviewer .s7setindicator
Propriété CSS
Description
des de couleur d’arrière-plan
Couleur d’arrière-plan au format hexadécimal de l’indicateur défini.
NOTE
Définir l’indicateur prend en charge le sélecteur d’attributs de mode, que vous pouvez utiliser pour appliquer différents styles pour les modes d’opération numériques et en pointillés. En particulier, mode="numeric" correspond au mode de fonctionnement numérique; mode="dotted" correspond à l'état 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 défini individuel est contrôlé par le sélecteur de classe CSS. Elle s’applique aux éléments en mode de fonctionnement pointillé et numérique.

.s7carouselviewer .s7setindicator .s7dot

Propriété CSS
Description
largeur
Largeur du point indicateur défini.
de hauteur
Hauteur du point indicateur défini.
la marge de gauche
Marge de gauche en pixels.
de la marge supérieure
Marge supérieure en pixels.
de la marge droite
Marge de droite en pixels.
de la marge inférieure
Marge inférieure en pixels.
de rayon de bordure
Rayon de la bordure en pixels.
des de couleur d’arrière-plan
Couleur d’arrière-plan au format hexadécimal
famille de polices
Nom de la police.
de taille de police
Taille de la police.
de couleur
Couleur de la police.
un d’alignement vertical
Alignement vertical de l’index de bannière.
de hauteur de ligne
Hauteur du texte de l’index de bannière.
NOTE
Définir les éléments d’indicateur prend 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 de l’ensemble ; state="unselected" correspond à l’état d’élément par défaut.

Par exemple, supposons que vous souhaitiez configurer un indicateur de réglage en mode pointillé pour les ordinateurs de bureau. Vous souhaitez qu’il soit positionné à 20 pixels du bas de la visionneuse. De plus, vous souhaitez que les points non sélectionnés soient noirs avec 50 % de transparence, 15 x 15 pixels avec sept pixels arrondis. Les points sélectionnés sont noirs avec 90 % de transparence, 18 x 18 pixels avec neuf pixels d’angles 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;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8