Selecionar o botão Próximo slide move um usuário para o próximo slide no conjunto de carrossel.
Esse botão não é exibido em dispositivos de toque. Você pode dimensionar, usar a capa e posicionar esse botão usando o CSS.
Propriedades CSS da área principal do visualizador
A aparência do botão é controlada com o seguinte seletor de classe CSS:
.s7carouselviewer .s7panrightbutton
Propriedade CSS |
Descrição |
---|---|
top |
Posicione a partir da parte superior da borda do visualizador. |
right |
Posição à direita da borda do visualizador. |
left |
Posição à esquerda do visualizador. |
bottom |
Posição a partir da parte inferior da borda do visualizador. |
width |
Largura do botão. |
altura |
Altura do botão. |
imagem de fundo |
A imagem exibida para um determinado estado de botão. |
posição de fundo |
Posição dentro da estrutura de arte, se os sprites CSS forem usados. Consulte também sprites CSS . |
cursor |
Tipo de cursor. |
Esse botão suporta o seletor de atributos state
, que pode ser usado para aplicar skins 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ê deseja configurar um botão de slide anterior com 60 x 60 pixels. O botão deve ser posicionado em dez pixels a partir da borda direita do visualizador e centralizado verticalmente. E você quer que ele exiba uma imagem diferente para cada um dos quatro estados de botão diferentes.
.s7carouselviewer .s7panrightbutton{
bottom: 50%;
right: 10px;
background-size:60px;
cursor: pointer;
}
.s7carouselviewer.s7mouseinput .s7panrightbutton {
width:60px;
height:60px;
margin-bottom: -20px;
}
.s7carouselviewer.s7mouseinput .s7panrightbutton[state] {
background-image: url(../../viewers/s7viewers/html5/images/v2/CarouselDotsRightButton_dark_sprite.png);
}
.s7carouselviewer.s7mouseinput .s7panrightbutton[state='up'] { background-position: -0px -60px; }
.s7carouselviewer.s7mouseinput .s7panrightbutton[state='over'] { background-position: -0px -0px; }
.s7carouselviewer.s7mouseinput .s7panrightbutton[state='down'] { background-position: -0px -0px; }
.s7carouselviewer.s7mouseinput .s7panrightbutton[state='disabled'] { background-position: -0px -60px; }