Indicateur de définition set-indicator
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
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
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;
}