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 impostato
L’aspetto del contenitore di indicatori impostato è controllato dal seguente selettore di classe CSS:
.s7carouselviewer .s7setindicator
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
state, che può essere utilizzato per applicare interfacce diverse a stati di miniature diversi. In particolare, state="selected" corrisponde all'elemento corrente nel set; state="unselected" corrisponde allo stato elemento predefinito.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 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;
}