Definir indicador

Última actualización: 2023-05-23
  • Creado para:
  • Developer
    User

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.

NOTA

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.

NOTA

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;
}
Página anterior
Next page

En esta página