Imposta indicatore set-indicator

Imposta indicatore è una serie di punti di cui viene eseguito il rendering nella parte inferiore del visualizzatore. Mostra la posizione corrente all'interno del set.

Proprietà CSS dell'indicatore di set

L’aspetto del contenitore di indicatori impostato è controllato dal seguente selettore di classe CSS:

.s7carouselviewer .s7setindicator
Proprietà CSS
Descrizione
background-color
Colore di sfondo in formato esadecimale dell'indicatore impostato.
NOTE
L'indicatore Set supporta il selettore di attributi di modalità, che consente di applicare stili diversi per le modalità operative punteggiate e numeriche. In particolare: mode="numeric" corrisponde alla modalità operativa numerica; mode="dotted" corrisponde allo stato predefinito del punto.

Ad esempio, supponiamo che si desideri impostare un indicatore impostato con uno sfondo bianco:

.s7carouselviewer .s7setindicator {
 background-color: #FFFFFF;
}

L'aspetto di un singolo punto indicatore impostato viene controllato con il selettore di classe CSS. Si applica agli elementi sia in modalità operativa punteggiata che numerica.

.s7carouselviewer .s7setindicator .s7dot

Proprietà CSS
Descrizione
width
Larghezza dell'indicatore impostato punto.
height
Altezza del punto indicatore impostato.
margin-left
Margine sinistro in pixel.
margin-top
Margine superiore in pixel.
margine destro
Margine destro in pixel.
margin-bottom
Margine inferiore in pixel.
border-radius
Raggio del bordo in pixel.
background-color
Colore di sfondo in formato esadecimale.
font-family
Nome del carattere.
font-size
Dimensione del carattere.
color
Colore del carattere.
Allineamento verticale
Allineamento verticale dell'indice del banner.
line-height
Altezza del testo per l'indice del banner.
NOTE
Le voci degli indicatori impostati supportano state selettore di attributi, che può essere utilizzato per applicare skin diversi a stati di miniature diversi. In particolare: state="selected" corrisponde all’elemento corrente dell’insieme; state="unselected" corrisponde allo stato predefinito dell'elemento.

Si supponga, ad esempio, di voler impostare un indicatore impostato in modalità punteggiata per i sistemi desktop. Si desidera posizionarlo a 20 pixel dalla parte inferiore del visualizzatore. Si desidera inoltre che i punti non selezionati siano neri con trasparenza al 50%, 15 x 15 pixel con sette pixel e angoli arrotondati. I punti selezionati sono neri con trasparenza al 90%, 18 x 18 pixel con nove pixel angoli arrotondati. La spaziatura tra i punti è di cinque pixel.

.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;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8