El indicador de conjunto es una serie de puntos procesados en la parte inferior del visor. Muestra la posición actual dentro del conjunto.
Propiedades CSS del indicador establecido
El aspecto del contenedor del indicador establecido se controla con el siguiente selector de clase CSS:
.s7carouselviewer .s7setindicator
CSS, propiedad |
Descripción |
---|---|
background-color |
Color de fondo en formato hexadecimal del indicador establecido. |
El indicador de conjunto admite el selector de atributos de modo, que puede utilizar para aplicar diferentes estilos a los modos de operación numérica y de puntos. En particular, mode="numeric"
corresponde al modo de operación numérica; mode="dotted"
corresponde al estado de punto predeterminado.
Ejemplo: para configurar el indicador de configuración con un fondo blanco:
.s7carouselviewer .s7setindicator {
background-color: #FFFFFF;
}
El aspecto de un punto indicador de conjunto individual se controla con el selector de clase CSS. Se aplica a los elementos en los modos de operación numérica y de puntos.
.s7carouselviewer .s7setindicator .s7dot
CSS, propiedad |
Descripción |
---|---|
width |
Ancho del punto indicador establecido. |
height |
Altura del punto indicador establecido. |
margin-left |
Margen izquierdo en píxeles. |
margin-top |
Margen superior en píxeles. |
margin-right |
Margen derecho en píxeles. |
margin-bottom |
Margen inferior en píxeles. |
border-radius |
Radio del borde en píxeles. |
background-color |
Color de fondo en formato hexadecimal. |
font-family |
Nombre de la fuente. |
font-size |
Tamaño de la fuente. |
color |
Color de fuente. |
vertical-align |
Alineación vertical del índice del letrero. |
line-height |
Altura del texto para el índice del letrero. |
Los elementos del indicador de conjunto admiten el selector de atributos state
, que se puede utilizar para aplicar diferentes apariencias a diferentes estados de miniaturas. En particular, state="selected"
corresponde al elemento actual del conjunto; state="unselected"
corresponde al estado del elemento predeterminado.
Ejemplo: para configurar el indicador de conjunto en modo de puntos para que los sistemas de escritorio se posicionen 20 píxeles desde la parte inferior del visor. Los puntos no seleccionados son negros con una transparencia del 50%, 15 x 15 píxeles con 7 píxeles de esquinas redondeadas. Los puntos seleccionados son negros con una transparencia del 90%, 18 x 18 píxeles con 9 píxeles de esquinas redondeadas. El espaciado entre puntos es de 5 píxeles.
.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;
}