Definir indicador

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.

NOTA

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.

NOTA

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;
}

En esta página