diapositive précédente

Cliquez ou appuyez sur ce bouton pour renvoyer un utilisateur à la diapositive précédente du carrousel. Ce bouton n’est pas affiché sur les périphériques tactiles. Vous pouvez dimensionner, habiller et positionner ce bouton à l’aide de CSS.

Propriétés CSS de la zone de visualisation principale

L’aspect du bouton est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7carouselviewer .s7panleftbutton

Propriété CSS

Description

haut

Position à partir du haut de la bordure de la visionneuse.

droite

Position à droite de la bordure de la visionneuse.

gauche

Position à gauche de la bordure de la visionneuse.

bas

Position à partir du bas de la bordure de la visionneuse.

width

Largeur du bouton.

height

Hauteur du bouton.

image d’arrière-plan

Image affichée pour un état de bouton donné.

arrière-plan-position

Positionnez l’objet à l’intérieur de l’objet d’illustration, si des sprites CSS sont utilisés.

Voir aussi sprites CSS .

curseur

Type de curseur.

REMARQUE

Ce bouton prend en charge le sélecteur d’attributs 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.

Exemple : pour configurer un précédent bouton de diapositive de 60 x 60 pixels, positionné à 10 pixels de la bordure de la visionneuse de gauche et centré verticalement, et 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; }

Sur cette page