Definir indicador set-indicator
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 establecido
El aspecto del contenedor del indicador determinado se controla con el siguiente selector de clase CSS:
.s7carouselviewer .s7setindicator
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
state, 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 de elemento predeterminado.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;
}