设置指示器 set-indicator

设置指示器是显示在查看器底部的一系列点。 它显示集合中的当前位置。

设置指示器的CSS属性

使用以下CSS类选择器控制设置指示器容器的外观:

.s7carouselviewer .s7setindicator
CSS属性
说明
background-color
设置指示器的十六进制格式的背景颜色。
NOTE
设置指示符支持模式属性选择器,您可以使用它来为点状和数字操作模式应用不同的样式。 特别是, mode="numeric" 对应于数值运算模式; mode="dotted" 对应于缺省点状态。

例如,假设您要设置一个具有白色背景的设置指示器:

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

单个设置指示符点的外观由CSS类选择器控制。 它适用于点状和数字运算模式下的项目。

.s7carouselviewer .s7setindicator .s7dot

CSS属性
说明
width
设置指示器点的宽度。
height
设置指示点的高度。
左边距
左边距(像素)。
上边距
上边距(像素)。
右边距
以像素为单位的右边距。
下边距
下边距(像素)。
border-radius
边框半径(像素)。
background-color
以十六进制格式表示的背景颜色。
font-family
字体的名称。
font-size
字体大小。
color
字体的颜色。
vertical-align
横幅索引的垂直对齐方式。
line-height
横幅索引的文本高度。
NOTE
设置指标项支持 state 属性选择器,可用于将不同的外观应用于不同的缩略图状态。 特别是, state="selected" 对应于集合中的当前元素; state="unselected" 对应于缺省项目状态。

例如,假设您要为桌面系统以点状模式设置一个设置指示器。 您希望将其放在距离查看器底部20像素的位置。 并且,您希望未选取的点为黑色,透明度为50%,像素为15 x 15,圆角为7像素。 所选点为黑色,透明度为90%,像素为18 x 18,圆角为9像素。 点之间的间距为5像素。

.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;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8