インジケーターの設定

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

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

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

行の高さ

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

メモ

インジケーター項目でサポートされる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;
}

このページ