文件Dynamic Media檢視器參考指南

設定指標 set-indicator

Last update: Fri May 26 2023 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主題：

建立對象：

  • undefined
  • undefined

設定指標是呈現在檢視器底部的一系列點。 它會顯示集合中的目前位置。

設定指標的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畫素圓角。 點之間的間距是五個畫素。

.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