インジケーターの設定 set-indicator
設定インジケーターは、ビューアの下部にレンダリングされる一連のドットです。 セット内の現在の位置が表示されます。
設定インジケーターのCSSプロパティ
設定インジケーターコンテナの外観は、以下のCSSクラスセレクターを使用して制御します。
.s7carouselviewer .s7setindicator
CSSプロパティ
説明
background-color
設定インジケーターの16進形式の背景色。
NOTE
セットインジケーターでは、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
バナーインデックスの垂直方向の配置。
行の高さ
バナーインデックスのテキストの高さ。
NOTE
インジケーター項目でサポートされる
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;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8