设置指示器

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

设置指示器的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;
}

在此页面上