Definir indicador

O indicador Set é uma série de pontos renderizados na parte inferior do visualizador. Mostra a posição atual no conjunto.

Propriedades CSS do indicador de conjunto

A aparência do contêiner indicador definido é controlada com o seguinte seletor de classe CSS:

.s7carouselviewer .s7setindicator

Propriedade CSS

Descrição

cor do fundo

A cor do plano de fundo em formato hexadecimal do indicador definido.

OBSERVAÇÃO

O indicador Set suporta o seletor de atributo mode, que pode ser usado para aplicar estilos diferentes para modos de operação pontilhados e numéricos. Em particular, mode="numeric" corresponde ao modo de operação numérico; mode="dotted" corresponde ao estado de ponto padrão.

Exemplo - para configurar o indicador de configuração com um fundo branco:

.s7carouselviewer .s7setindicator { 
 background-color: #FFFFFF; 
}

A aparência de um ponto indicador de conjunto individual é controlada com o seletor de classe CSS. Aplica-se a itens em modos de operação pontilhados e numéricos.

.s7carouselviewer .s7setindicator .s7dot

Propriedade CSS

Descrição

width

Largura do ponto indicador definido.

altura

Altura do ponto indicador definido.

margem esquerda

Margem esquerda em pixels.

margem superior

Margem superior em pixels.

margem direita

Margem direita em pixels.

margin-bottom

Margem inferior em pixels.

border-radius

Raio da borda em pixels.

cor do fundo

Cor do plano de fundo em formato hexadecimal.

família de fontes

Nome da fonte.

tamanho da fonte

Tamanho da fonte.

color

Cor da fonte.

alinhamento vertical

Alinhamento vertical do índice do banner.

altura da linha

Altura do texto para o índice do banner.

OBSERVAÇÃO

Os itens do indicador definido oferecem suporte ao seletor de atributos state, que pode ser usado para aplicar capas diferentes a estados de miniatura diferentes. Em particular, state="selected" corresponde ao elemento atual no conjunto; state="unselected" corresponde ao estado padrão do item.

Exemplo - para configurar o indicador de configuração no modo pontilhado para que os sistemas de desktop sejam posicionados 20 pixels a partir da parte inferior do visualizador. Os pontos não selecionados são pretos com 50% de transparência, 15 x 15 pixels com 7 pixels de cantos arredondados. Os pontos selecionados são pretos com 90% de transparência, 18 x 18 pixels com 9 pixels de cantos arredondados. O espaçamento entre pontos é de 5 pixels.

.s7carouselviewer.s7mouseinput .s7setindicator { 
 bottom: 20px; 
} 
.s7carouselviewer.s7mouseinput .s7setindicator[mode='dotted'] .s7dot{ 
 width:15px; 
 height:15px; 
 margin-left:2.5px; 
 margin-right:2.5px; 
 margin-top:2.5px; 
 margin-bottom:2.5px; 
} 
.s7carouselviewer.s7mouseinput .s7setindicator[mode='dotted'] .s7dot[state='selected'] {  
 width:18px; 
 height:18px; 
 background-color: #000000; 
 opacity: 0.9; 
 border-radius:9px; 
} 
.s7carouselviewer.s7mouseinput .s7setindicator[mode='dotted'] .s7dot[state='unselected'] {  
 width:15px; 
 height:15px; 
 background-color: #000000; 
 opacity: 0.5; 
 border-radius:7px; 
}

Nesta página