设置指示器

最近更新： 2024年7月20日

主题：

创建对象：

开发人员
用户

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

设置指示器的 CSS属性

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

.s7carouselviewer .s7setindicator

CSS属性	说明
背景色	设置指示器的十六进制格式的背景颜色。

NOTE

设置指示器支持模式属性选择器，您可以使用它来为点状和数字操作模式应用不同的样式。特别是，mode="numeric"对应于数值操作模式；mode="dotted"对应于默认点状态。

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

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

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

.s7carouselviewer .s7setindicator .s7dot

CSS属性	说明
宽度	设置指示器点的宽度。
高度	设置指示器点的高度。
左边距	左边距（像素）。
上边距	上边距（像素）。
右边距	以像素为单位的右边距。
下边距	下边距（像素）。
边框半径	边框半径（像素）。
背景色	以十六进制格式表示的背景颜色。
字体系列	字体名称。
字体大小	字体大小。
颜色	字体的颜色。
垂直对齐	横幅索引的垂直对齐方式。
行高	横幅索引的文本高度。

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