Botão PlayPause

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 estará visível somente se a variável CarouselViewer.autoplay está definido como 1; caso contrário, ela ficará oculta. 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

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);
}