设置指示器

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

设置指示器的CSS属性

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

.s7carouselviewer .s7setindicator

CSS属性

说明

背景颜色

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

注意

设置指示器支持模式属性选择器，您可以使用该选择器对点线和数字操作模式应用不同的样式。 具体而言，mode="numeric"对应于数字操作模式；mode="dotted"对应于默认的点状态。

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

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

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

.s7carouselviewer .s7setindicator .s7dot

CSS属性

说明

width

设置指示器点的宽度。

height

设置指示器点的高度。

边距 — 左

左边距（以像素为单位）。

边距 — 顶部

上边距（以像素为单位）。

边距右侧

右边距（以像素为单位）。

边距 — 底部

下边距（以像素为单位）。

边框半径

边框半径（以像素为单位）。

背景颜色

以十六进制格式表示的背景颜色。

字体系列

字体名称。

字体大小

字体大小。

color

字体的颜色。

垂直对齐

横幅索引的垂直对齐方式。

行高

横幅索引的文本高度。

注意

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

在此页面上