Imposta indicatore

L'indicatore set è una serie di punti sottoposti a rendering nella parte inferiore del visualizzatore. Mostra la posizione corrente all’interno del set.

Proprietà CSS dell’indicatore set

L’aspetto del contenitore dell’indicatore set è controllato con il seguente selettore di classe CSS:

.s7carouselviewer .s7setindicator

Proprietà CSS

Descrizione

colore di sfondo

Colore di sfondo in formato esadecimale dell'indicatore set.

NOTA

L'indicatore set supporta il selettore di attributi della modalità, che può essere utilizzato per applicare stili diversi per le modalità di funzionamento punteggiate e numeriche. In particolare, mode="numeric" corrisponde alla modalità operativa numerica; mode="dotted" corrisponde allo stato predefinito del punto.

Ad esempio, supponi di voler impostare un indicatore di set con sfondo bianco:

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

L’aspetto di un singolo punto indicatore del set è controllato con il selettore di classe CSS. Si applica agli elementi sia in modalità di funzionamento punteggiata che numerica.

.s7carouselviewer .s7setindicator .s7dot

Proprietà CSS

Descrizione

width

Larghezza del punto dell'indicatore impostato.

height

Altezza del punto indicatore impostato.

margine sinistro

Margine sinistro in pixel.

margine superiore

Margine superiore in pixel.

margine destro

Margine destro in pixel.

margine inferiore

Margine inferiore in pixel.

raggio bordo

Raggio del bordo in pixel.

colore di sfondo

Colore di sfondo in formato esadecimale.

font-family

Nome del font.

font-size

Dimensione del font.

color

Colore del font.

allineamento verticale

Allineamento verticale dell'indice del banner.

altezza riga

Altezza del testo per l'indice del banner.

NOTA

Gli elementi degli indicatori impostati supportano il selettore di attributi state , che può essere utilizzato per applicare skin diversi a diversi stati di miniatura. In particolare, state="selected" corrisponde all’elemento corrente nel set; state="unselected" corrisponde allo stato predefinito dell'elemento.

Ad esempio, si supponga di voler impostare un indicatore di set in modalità punteggiata per i sistemi desktop. Desideri che sia posizionato a 20 pixel dal fondo del visualizzatore. Inoltre, vuoi che i punti non selezionati siano neri con una trasparenza del 50%, 15 x 15 pixel con sette angoli arrotondati. I punti selezionati sono neri con trasparenza del 90%, 18 x 18 pixel con angoli arrotondati di nove pixel. Lo spazio 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