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 de conjunto
El aspecto del contenedor de 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 se puede utilizar para aplicar distintos estilos a los modos de operación numéricos y de puntos. En concreto, mode="numeric"
corresponde al modo de operación numérico; mode="dotted"
corresponde al estado de punto predeterminado.
A modo de ejemplo, supongamos que desea configurar un indicador de conjunto 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 tanto en los modos de operación numérica como de puntos.
.s7carouselviewer .s7setindicator .s7dot
CSS, propiedad |
Descripción |
---|---|
width |
Anchura del punto indicador definido. |
height |
Altura del punto indicador definido. |
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 la fuente. |
alineación vertical |
Alineación vertical del índice del banner. |
line-height |
Altura del texto para el índice del banner. |
Los elementos del indicador de configuración admiten el selector de atributos state
, que puede utilizarse para aplicar diferentes aspectos a diferentes estados de miniaturas. En concreto, state="selected"
corresponde al elemento actual del conjunto; state="unselected"
corresponde al estado del elemento predeterminado.
Por ejemplo, supongamos que desea configurar un indicador de conjunto en modo de puntos para sistemas de escritorio. Desea que se sitúe a 20 píxeles de la parte inferior del visor. Además, desea que los puntos no seleccionados sean negros con un 50% de transparencia, 15 x 15 píxeles con siete esquinas redondeadas de píxeles. Los puntos seleccionados son negros con un 90% de transparencia, 18 x 18 píxeles con nueve píxeles de esquinas redondeadas. El espaciado entre puntos es de cinco 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;
}