Al tocar o hacer clic en este botón, el usuario regresa a la diapositiva anterior del conjunto de carrusel. Este botón no se muestra en dispositivos táctiles. Puede cambiar el tamaño, el aspecto y la posición de este botón mediante CSS.
Propiedades CSS del área del visor principal
El aspecto del botón se controla con el siguiente selector de clase CSS:
.s7carouselviewer .s7panleftbutton
CSS, propiedad |
Descripción |
---|---|
parte superior |
Posición desde la parte superior del borde del visor. |
derecha |
Posición desde la derecha del borde del visor. |
izquierda |
Posición desde la izquierda del borde del visor. |
parte inferior |
Posición desde la parte inferior del borde del visor. |
width |
Ancho del botón. |
height |
Altura del botón. |
background-image |
Imagen que se muestra para un estado de botón determinado. |
background-position |
Colocar dentro de la ilustración sprite, si se utilizan sprites CSS. Consulte también sprites CSS . |
cursor |
Tipo de cursor. |
Este botón admite el selector de atributos state
, que puede utilizarse para aplicar diferentes apariencias a distintos estados de botones.
La información de objeto del botón se puede localizar. Consulte Localización de los elementos de la interfaz de usuario para obtener más información.
Ejemplo: para configurar un botón de diapositiva anterior de 60 x 60 píxeles, situado a 10 píxeles del borde izquierdo del visor y centrado verticalmente, y muestra una imagen diferente para cada uno de los cuatro estados de botón diferentes.
.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; }