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 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.

NOTA

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.

NOTA

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

En esta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free