インジケータを設定

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

設定インジケーターの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; 
}

このページ