Quando si seleziona il pulsante di diapositiva successiva, l'utente passa alla diapositiva successiva del set carosello.
Questo pulsante non viene visualizzato sui dispositivi touch. Puoi ridimensionare, skin e posizionare questo pulsante utilizzando CSS.
Proprietà CSS dell’area visualizzatore principale
L’aspetto del pulsante è controllato con il seguente selettore di classe CSS:
.s7carouselviewer .s7panrightbutton
Proprietà CSS |
Descrizione |
---|---|
top |
Posizione dalla parte superiore del bordo del visualizzatore. |
right |
Posizione da destra del bordo del visualizzatore. |
sinistra |
Posizione a sinistra del visualizzatore. |
bottom |
Posizione dal fondo del bordo del visualizzatore. |
width |
Larghezza del pulsante. |
height |
Altezza del pulsante. |
immagine di sfondo |
Immagine visualizzata per un determinato stato del pulsante. |
posizione di sfondo |
Posizione all’interno dello sprite di un’immagine, se vengono utilizzati gli spriti CSS. Vedere anche Spriti CSS . |
cursore |
Tipo di cursore. |
Questo pulsante supporta il selettore di attributi state
, che può essere utilizzato per applicare interfacce diverse a diversi stati del pulsante.
La descrizione comando del pulsante può essere localizzata. Per ulteriori informazioni, consulta Localizzazione degli elementi dell’interfaccia utente .
Ad esempio, si supponga di voler impostare un pulsante diapositiva precedente di 60 x 60 pixel. Il pulsante deve essere posizionato a dieci pixel dal bordo destro del visualizzatore e centrato verticalmente. E volete che visualizzi un'immagine diversa per ciascuno dei quattro stati del pulsante.
.s7carouselviewer .s7panrightbutton{
bottom: 50%;
right: 10px;
background-size:60px;
cursor: pointer;
}
.s7carouselviewer.s7mouseinput .s7panrightbutton {
width:60px;
height:60px;
margin-bottom: -20px;
}
.s7carouselviewer.s7mouseinput .s7panrightbutton[state] {
background-image: url(../../viewers/s7viewers/html5/images/v2/CarouselDotsRightButton_dark_sprite.png);
}
.s7carouselviewer.s7mouseinput .s7panrightbutton[state='up'] { background-position: -0px -60px; }
.s7carouselviewer.s7mouseinput .s7panrightbutton[state='over'] { background-position: -0px -0px; }
.s7carouselviewer.s7mouseinput .s7panrightbutton[state='down'] { background-position: -0px -0px; }
.s7carouselviewer.s7mouseinput .s7panrightbutton[state='disabled'] { background-position: -0px -60px; }