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.

Ejemplo: para 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.

Ejemplo: para configurar el indicador de configuración en modo de puntos para que los sistemas de escritorio se coloquen 20 píxeles desde la parte inferior del visor. Los puntos no seleccionados son negros con un 50% de transparencia, 15 x 15 píxeles con 7 píxeles de esquinas redondeadas. Los puntos seleccionados son negros con un 90% de transparencia, 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; 
}

En esta página