メインコンテンツへスキップ

スライダーブロック

スタイルガイドに戻る

ス ラ イ ダーブ ロ ッ ク は、 2 つの画像を切 り 替え ら れ る よ う にす る 簡単な before/after ブロ ッ クを提供 し ます。これは通常、異なるプロパティ設定を表示するために使用されます。 画像のキャプション情報は上に表示され、ユーザーがスライダーバーをドラッグしてそのタイトルから離れると何が見えるかを示しています。 スライダーバーは3つの方法で移動できます。まず、画像のどこかをクリックすると、スライダーバーがその位置にスムーズにトゥイーンします。次に、適切なヘッダー(例:「ライトスキーム」)をクリックするとバーが反対側に移動し、最後に、ユーザーがバーを直接ドラッグすることができます。

例1

このスライダーブロックは、より広いアスペクトのブロックであるレイアウトワンを使用しています。開始位置は25%で、これはスライダーバーが画像の左側に向かってデフォルトで表示されることを意味します。

レイアウト1

ライトテーマ
ダークテーマ
テストキャプション

例2

このスライダーブロックは、背の高いアスペクトのブロックであるレイアウト2を使用しています。開始位置は75%で、スライダーバーのデフォルトは画像の右側となります。

レイアウト2

ダークテーマ
ライトテーマ
テストキャプション

例3

このスライダーブロックは複数のスライドを持ち、ユーザーはそれらの間をスライドすることができます。開始位置は50%で、これはスライダーバーが画像の中央に来るようにすることを意味します。

マルチスライダー

ダークテーマ
ライトテーマ
スライダー・ワン