Diapositive précédente previous-slide
Si vous sélectionnez ce bouton, l’utilisateur revient à la diapositive précédente de l’ensemble de carrousel. Ce bouton ne s’affiche pas sur les appareils tactiles. Vous pouvez dimensionner, habiller et positionner ce bouton à l’aide de CSS.
Propriétés CSS de la zone de visionneuse principale
L’aspect du bouton est contrôlé avec le sélecteur de classe CSS suivant :
.s7carouselviewer .s7panleftbutton
Positionnez à l’intérieur d’un sprite d’illustration si des sprites CSS sont utilisés.
Voir aussi des sprites CSS.
state, qui peut être utilisé pour appliquer différents habillages à différents états de bouton.L’info-bulle du bouton peut être localisée. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.
Par exemple, supposons que vous souhaitiez configurer un bouton de diapositive précédent de 60 x 60 pixels. Vous souhaitez le positionner à dix pixels de la bordure gauche de la visionneuse et le centrer verticalement. Vous souhaitez également qu’elle affiche une image différente pour chacun des quatre états de bouton différents.
.s7carouselviewer .s7panleftbutton {
bottom: 50%;
left: 10px;
background-size:60px;
cursor: pointer;
}
.s7carouselviewer.s7mouseinput .s7panleftbutton {
width:60px;
height:60px;
margin-bottom: -20px;
}
.s7carouselviewer.s7mouseinput .s7panleftbutton[state] {
background-image: url(../../viewers/s7viewers/html5/images/v2/CarouselDotsLeftButton_dark_sprite.png);
}
.s7carouselviewer.s7mouseinput .s7panleftbutton[state='up'] { background-position: -0px -60px; }
.s7carouselviewer.s7mouseinput .s7panleftbutton[state='over'] { background-position: -0px -0px; }
.s7carouselviewer.s7mouseinput .s7panleftbutton[state='down'] { background-position: -0px -0px; }
.s7carouselviewer.s7mouseinput .s7panleftbutton[state='disabled'] { background-position: -0px -60px; }