インジケータを設定

設定インジケーターは、ビューアの下部にレンダリングされる一連のドットです。 セット内の現在位置を表示します。

設定インジケーターのCSSプロパティ

設定インジケーターコンテナの外観は、以下のCSSクラスセレクターを使用して制御します。

.s7carouselviewer .s7setindicator

CSSプロパティ

説明

background-color

設定インジケーターの16進数形式の背景色。

メモ

設定インジケーターでは、mode属性セレクターがサポートされます。このセレクターは、点線と数値の操作モードに対して異なるスタイルを適用するのに使用できます。 特に、mode="numeric"は数値演算モードに対応します。mode="dotted"は、デフォルトのドットの状態に対応します。

例 — 白の背景でインジケーターを設定するには、次のように記述します。

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

個々の設定インジケーターのドットの外観は、CSSクラスセレクターを使用して制御します。 これは、点線と数値の両方の操作モードの項目に適用されます。

.s7carouselviewer .s7setindicator .s7dot

CSSプロパティ

説明

width

設定インジケーターのドットの幅。

height

設定インジケーターのドットの高さ。

margin-left

左余白(ピクセル単位)。

margin-top

上余白(ピクセル単位)。

margin-right

右マージン(ピクセル単位)。

margin-bottom

下余白(ピクセル単位)。

border-radius

境界線の半径(ピクセル単位)

background-color

16進数形式の背景色。

font-family

フォントの名前。

font-size

フォントのサイズ。

color

フォントの色。

vertical-align

バナーのインデックスの垂直方向の配置。

line-height

バナーインデックスのテキストの高さ。

メモ

設定インジケーター項目では、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 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