设置指示器

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

设置指示器的CSS属性

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

.s7carouselviewer .s7setindicator

CSS属性

说明

background-color

设置指示器的十六进制格式的背景颜色。

注意

设置指示符支持模式属性选择器，您可以使用它来为点状和数字操作模式应用不同的样式。 特别是， 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

横幅索引的文本高度。

注意

设置指标项支持 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;
}

在此页面上