Définir l'indicateur

L’indicateur défini est une série de points affichés au bas de la visionneuse. Il affiche la position actuelle dans la visionneuse.

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

L’aspect du conteneur d’indicateur de définition est contrôlé par le 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.

REMARQUE

L’indicateur Set prend en charge le sélecteur d’attributs de mode, que vous pouvez utiliser pour appliquer différents styles aux modes de fonctionnement numérique et en pointillé. mode="numeric" correspond en particulier au mode de fonctionnement numérique ; mode="dotted" correspond à l’état du point par défaut.

Exemple - pour définir un indicateur avec un arrière-plan blanc :

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

L’aspect d’un point d’indicateur de paramètre individuel est contrôlé par le sélecteur de classe CSS. Il s’applique aux articles en mode de fonctionnement numérique et en mode pointillé.

.s7carouselviewer .s7setindicator .s7dot

Propriété CSS

Description

width

Largeur du point d’indicateur défini.

height

Hauteur du point indicateur défini.

marge-gauche

Marge gauche en pixels.

margin-top

Marge supérieure en pixels.

marge droite

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.

ligne-hauteur

Hauteur du texte de l’index de bannière.

REMARQUE

Les éléments d’indicateur prennent en charge le sélecteur d’attributs state, qui peut être utilisé pour appliquer différents habillages à différents états de miniature. state="selected" correspond en particulier à l’élément actif de l’ensemble ; state="unselected" correspond à l’état d’élément par défaut.

Exemple : pour configurer l’indicateur en mode pointillé pour que les systèmes de bureau soient positionnés à 20 pixels du bas de la visionneuse. Les points non sélectionnés sont noirs avec 50 % de transparence, 15 x 15 pixels avec 7 pixels aux coins arrondis. Les points sélectionnés sont noirs avec 90 % de transparence, 18 x 18 pixels avec 9 pixels aux coins arrondis. L’espacement entre les points est de 5 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; 
}

Sur cette page

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