Establecer indicador es una serie de puntos que se representan en la parte inferior del visor. Muestra la posición actual dentro del conjunto.
Propiedades CSS del indicador determinado
El aspecto del contenedor del indicador determinado se controla con el siguiente selector de clase CSS:
.s7carouselviewer .s7setindicator
Propiedad CSS |
Descripción |
---|---|
background-color |
El color de fondo en formato hexadecimal del indicador determinado. |
El indicador Set admite el selector de atributos mode, que se puede utilizar para aplicar distintos estilos a los modos de operación numéricos y de puntos. En particular, mode="numeric"
corresponde al modo de operación numérico; mode="dotted"
corresponde al estado de punto predeterminado.
Por ejemplo, supongamos que desea configurar un indicador definido con un fondo blanco:
.s7carouselviewer .s7setindicator {
background-color: #FFFFFF;
}
El aspecto de un punto indicador de conjunto individual se controla con el selector de clases CSS. Se aplica a los elementos tanto en los modos de operación numéricos como de puntos.
.s7carouselviewer .s7setindicator .s7dot
Propiedad CSS |
Descripción |
---|---|
width |
Anchura del punto del indicador definido. |
height |
Altura del punto del 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 de 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. |
vertical-align |
Alineación vertical del índice del titular. |
altura de línea |
Altura del texto del índice del titular. |
Establecer elementos indicadores que admitan el state
selector de atributos, que se puede utilizar para aplicar diferentes aspectos a diferentes estados de miniaturas. En particular, state="selected"
corresponde al elemento actual del conjunto; state="unselected"
corresponde al estado predeterminado del elemento.
Por ejemplo, supongamos que desea configurar un indicador definido en modo de puntos para sistemas de escritorio. Desea que se coloque a 20 píxeles de la parte inferior del visor. Y, desea que los puntos no seleccionados sean negros con una transparencia del 50%, 15 x 15 píxeles con esquinas redondeadas de siete píxeles. Los puntos seleccionados son de color negro con una transparencia del 90 %, 18 x 18 píxeles con esquinas redondeadas de nueve píxeles. El espacio 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;
}