インジケーターを設定 set-indicator
セットインジケーターは、ビューアの下部にレンダリングされる一連のドットです。 セット内の現在の位置が表示されます。
セットインジケーターの CSS プロパティ
セットインジケーターコンテナの外観は、次の CSS クラスセレクターで制御します。
.s7carouselviewer .s7setindicator
CSS プロパティ
説明
の背景色の
設定されたインジケーターの 16 進数形式の背景色。
NOTE
セットインジケーターは、点線と数値の操作モードに異なるスタイルを適用するために使用できるモード属性セレクターをサポートしています。 特に、
mode="numeric" は数値操作モードに対応し、mode="dotted" はデフォルトのドット状態に対応します。例えば、背景が白いセットインジケーターを設定するとします。
.s7carouselviewer .s7setindicator {
background-color: #FFFFFF;
}
個々のセットインジケータードットの外観は、CSS クラスセレクターで制御します。 点線と数値の両方の操作モードの項目に適用されます。
.s7carouselviewer .s7setindicator .s7dot
CSS プロパティ
説明
幅
設定されたインジケータードットの幅。
高さ
設定されたインジケータードットの高さ。
margin-left
左余白（ピクセル単位）。
margin-top
上マージン （ピクセル単位）。
margin-right
右余白（ピクセル単位）。
margin-bottom
下余白（ピクセル単位）。
border-radius
境界線の半径（ピクセル単位）。
の背景色の
背景色（16 進数形式）。
フォントファミリーの
フォントの名前。
font-size
フォントのサイズ。
color
フォントの色。
垂直方向の位置揃え
バナーインデックスの垂直方向揃え。
line-height
バナーインデックスのテキストの高さ。
NOTE
セットインジケーター項目は
state 属性セレクターをサポートしており、これを使用して、異なるスキンを異なるサムネール状態に適用できます。 特に、state="selected" はセット内の現在の要素に対応し、state="unselected" はデフォルトの項目状態に対応します。例えば、デスクトップシステムでセットインジケーターを点線モードで設定するとします。 ビューアの下部から 20 ピクセルの位置に挿入します。 また、選択していないドットを 50% の透明度で黒に、7 ピクセルの角を丸めた 15 x 15 ピクセルにする必要があります。 選択されたドットは、透明度が 90% の黒、角が 9 ピクセルの丸い 18 x 18 ピクセルです。 ドットの間隔は 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