Botón ReproducirPausa playpause-button

El botón Reproducir/Pausa permite al usuario pausar o reanudar el comportamiento de reproducción automática del carrusel.

El botón solo es visible si la variable CarouselViewer.autoplay El parámetro se ha establecido en 1; de lo contrario, se oculta. Puede cambiar el tamaño, la apariencia y la posición de este botón, en relación con la barra de control que lo contiene, mediante CSS.

Propiedades CSS del área del visor principal

El aspecto del botón se controla con el siguiente selector de clase CSS:

.s7carouselviewer .s7playpausebutton

Propiedad CSS
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 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

Coloque dentro del icono de ilustración si se utilizan iconos CSS.

Consulte también Sprites CSS.

cursor
Tipo de cursor.
NOTE
Este botón admite el state selector de atributos, que se puede utilizar para aplicar distintos aspectos a distintos estados de botón.

La información del objeto del botón se puede localizar. Consulte Localización de los elementos de la interfaz de usuario para obtener más información.

Por ejemplo, supongamos que desea configurar un botón de pausa de reproducción de 28 x 28 píxeles. Desea que el botón se coloque a 17 píxeles de la parte inferior y a 12 píxeles del borde izquierdo del visor. Además, desea que muestre una imagen diferente para cada uno de los cuatro estados de botón diferentes cuando se selecciona o no se selecciona.

.s7carouselviewer .s7playpausebutton {
bottom:17px;
left:12px;
width:28px;
height:28px;
}
.s7carouselviewer .s7playpausebutton[selected='true'][state='up'] {
  background-image:url(images/playBtn_up.png);
}
.s7carouselviewer .s7playpausebutton[selected='true'][state='over'] {
background-image:url(images/playBtn_over.png);
}
.s7carouselviewer .s7playpausebutton[selected='true'][state='down'] {
background-image:url(images/playBtn_down.png);
}
.s7carouselviewer .s7playpausebutton[selected='true'][state='disabled'] {
background-image:url(images/playBtn_disabled.png);
}
.s7carouselviewer .s7playpausebutton[selected='false'][state='up'] {
background-image:url(images/pauseBtn_up.png);
}
.s7carouselviewer .s7playpausebutton[selected='false'][state='over'] {
background-image:url(images/pauseBtn_over.png);
}
.s7carouselviewer .s7playpausebutton[selected='false'][state='down'] {
background-image:url(images/pauseBtn_down.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8