Imposta indicatore

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.

NOTA

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.

NOTA

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

In questa pagina