Definir indicador

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

Propriedades de CSS do indicador de conjunto

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

.s7carouselviewer .s7setindicator

Propriedade CSS	Descrição
cor de fundo	A cor do plano de fundo no formato hexadecimal do indicador de conjunto.

OBSERVAÇÃO

O indicador Set suporta o seletor de atributos mode, que você pode usar 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 aos itens nos modos de operação pontilhado e numérico.

.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.
raio da borda	Raio da borda em pixels.
cor de fundo	Cor do plano de fundo em formato hexadecimal.
família de fontes	Nome da fonte.
font-size	Tamanho da fonte.
cor	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 definidos suportam o seletor de atributos state, que pode ser usado para aplicar diferentes capas a diferentes estados de miniaturas. 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; 
}

Recursos em adobe.com

Ecommerce Integrations Automated Onboarding Auto Form Fill Personalized Experiences Dynamic Media Digital Rights Management

Nesta página

Exibir próximos:

A virtual event April 27-28.

Expand your skills and get inspired.

Privacidade (ATUALIZADA)

Termos de uso