Definir indicador

Definir indicador é uma série de pontos renderizados na parte inferior do visualizador. Ela mostra a posição atual no conjunto.

Propriedades CSS do indicador de definição

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

.s7carouselviewer .s7setindicator

Propriedade CSS

Descrição

background-color

A cor do plano de fundo em formato hexadecimal do indicador de definição.

OBSERVAÇÃO

Definir indicador suporta o seletor de atributo de modo, que você pode usar para aplicar diferentes estilos para modos de operação pontilhados e numéricos. Em especial, mode="numeric" corresponde ao modo de operação numérico; mode="dotted" corresponde ao estado de ponto padrão.

Por exemplo, suponha que você queira configurar um indicador de definição com um fundo branco:

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

A aparência de um ponto indicador de definição individual é controlada com o seletor de classe CSS. Ela se aplica a itens nos modos de operação pontilhados e numéricos.

.s7carouselviewer .s7setindicator .s7dot

Propriedade CSS

Descrição

largura

Largura do ponto indicador de definição.

altura

Altura do ponto indicador definido.

margem esquerda

Margem esquerda em pixels.

margem superior

Margem superior em pixels.

margem direita

Margem direita em pixels.

margem inferior

Margem inferior em pixels.

border-radius

Raio da borda em pixels.

background-color

Cor de fundo em formato hexadecimal.

font-family

Nome da fonte.

font-size

Tamanho da fonte.

cor

Cor da fonte.

vertical-alinhamento

Alinhamento vertical do índice do banner.

altura da linha

Altura do texto para o índice do banner.

OBSERVAÇÃO

Definir itens indicadores para suportar o state seletor de atributos, que pode ser usado para aplicar capas diferentes a estados de miniatura diferentes. Em especial, state="selected" corresponde ao elemento atual no conjunto; state="unselected" corresponde ao estado de item padrão.

Por exemplo, suponha que você queira configurar um indicador definido em modo pontilhado para sistemas desktop. Você deseja que ele seja posicionado 20 pixels da parte inferior do visualizador. E você deseja que os pontos não selecionados sejam pretos com 50% de transparência, 15 x 15 pixels com sete pixels de vértices arredondados. Os pontos selecionados são pretos com 90% de transparência, 18 x 18 pixels com nove pixels de cantos arredondados. O espaçamento entre pontos é de cinco 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