Botão PlayPause playpause-button

O botão Reproduzir/Pausar permite que o usuário pause ou retome o comportamento de reprodução automática do carrossel.

O botão é visível somente se o parâmetro CarouselViewer.autoplay estiver definido como 1; caso contrário, ele fica oculto. Você pode dimensionar, capa e posicionar esse botão, em relação à barra de controle que o contém, usando CSS.

Propriedades CSS da área do visualizador principal

A aparência do botão é controlada com o seguinte seletor de classe CSS:

.s7carouselviewer .s7playpausebutton

Propriedade CSS
Descrição
top
Posição na parte superior da borda do visualizador.
direita
Posição a partir da direita da borda do visualizador.
saiu de
Posição à esquerda do visualizador.
inferior
Posição na parte inferior da borda do visualizador.
largura
Largura do botão.
altura
Altura do botão.
imagem de fundo
A imagem exibida para um determinado estado de botão.
background-position

Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.

Consulte também sprites CSS.

cursor
Tipo de cursor.
NOTE
Este botão oferece suporte ao seletor de atributos state, que pode ser usado para aplicar capas diferentes a estados de botão diferentes.

A dica de ferramenta do botão pode ser localizada. Consulte Localização dos elementos da interface do usuário para obter mais informações.

Por exemplo, suponha que você queira configurar um botão de pausa de reprodução com 28 x 28 pixels. Você deseja que o botão seja posicionado a 17 pixels da parte inferior e a 12 pixels da borda esquerda do visualizador. E deseja exibir uma imagem diferente para cada um dos quatro estados de botão diferentes quando selecionado ou não selecionado.

.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