設定指示符

設定指標是檢視器底部呈現的一系列點。 它顯示集內的當前位置。

set指示符的CSS屬性

使用下列CSS類別選擇器控制設定指標容器的外觀:

.s7carouselviewer .s7setindicator

CSS屬性

說明

背景色

設定指示符的十六進位格式的背景顏色。

注意

設定指示符支援模式屬性選擇器,可用於為虛線和數字操作模式應用不同的樣式。 具體來說,mode="numeric"對應於數字操作模式;mode="dotted"對應於預設點狀態。

示例——要設定具有白色背景的設定指示符:

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

使用CSS類別選擇器控制個別設定指標點的外觀。 它適用於點狀和數字操作模式中的項目。

.s7carouselviewer .s7setindicator .s7dot

CSS屬性

說明

width

設定指示器點的寬度。

height

設定指示點的高度。

左邊距

左邊界(以像素為單位)。

邊距頂端

上邊界(以像素為單位)。

邊界右側

右邊距(像素)。

邊距——底部

底部邊界(以像素為單位)。

邊框半徑

邊框半徑(像素)。

背景色

十六進位格式的背景顏色。

font-family

字型名稱。

字型大小

字型大小。

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; 
}

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now