ギャラリー_サムネイル付きスライダー

公開日 2026年11月2日

写真を差し替えるとき
スライドとサムネイルの画像ブロックを、それぞれ「置換」で替えます。
スライドを増やすとき
1. スライダーの中の画像ブロックを複製し、「HTMLアンカー」を g6 のように次の番号にします。
2. サムネイルの画像ブロックを複製し、リンクを #g6 にして、写真を替えます。
3. 6枚目以降は、サムネイルのグループ（グリッド）の「列数」を増やすと、2列目に並びます。
11枚以上にするとき
サムネイルの強調は10枚までです。それ以上にするときは、カスタムCSS に、枚数に合わせた位置の行を足してください。
見た目を変えるとき
- 左右のスライドが見切れる幅は、スライダーとサムネイルのグループの左右の余白（11%）を、同じ値に変えます。0 にすると見切れません。
- 写真の縦横比は、スライドの画像ブロックの「縦横比」（16:10）で変えます。
動作環境
サムネイルを押してもスライダーが動かないときは、VK All in One Expansion Unit の「スムーススクロール」の設定を「CSS のみ」にしてください。

表示確認済みテーマ: X-T9、Lightning ( G3 / theme.json )、Twenty Twenty-Five、Twenty Twenty-Four、Twenty Twenty-Three
ライセンス区分: 有料プラグイン使用、無料
使用プロダクト: VK Blocks Pro (有料)、カスタムCSS
業種: ビジネス全般
パターンタイプ: セクション
パターンカテゴリー: スライダー
参考画像素材: PxHere
管理ID: 25645

【はじめて利用する方へ（ユーザー登録していない方）】

ユーザー登録をしなくても、無料パターンはコピーしてそのままご利用いただけます

お気に入り機能やプレミアムパターンのコピーなど、追加機能をご利用いただくには、「Vektor Passport」(もしくはLightning G3 Pro Pack) のライセンスが有効である必要があります。

ライセンスを購入する場合はこちら⇒１年・３年・５年

VK Pattern Library のユーザー登録は VWS のマイアカウントからのみとなります。

VK Pattern Library のユーザー登録の流れはこちらをご覧ください。

【VK Patterns Library のユーザー登録がお済みの方へ】

以下の機能はログイン時のみご利用いただけます。ご利用の際は ログイン してください。

ただし、Vektor Passport (もしくはLightning G3 Pro Pack) のライセンスが無効な場合は、これらの機能はご利用いただけません。

ライセンスを購入する場合はこちら⇒１年・３年・５年

このパターンについて

写真を差し替えるとき
スライドとサムネイルの画像ブロックを、それぞれ「置換」で替えます。
スライドを増やすとき
1. スライダーの中の画像ブロックを複製し、「HTMLアンカー」を g6 のように次の番号にします。
2. サムネイルの画像ブロックを複製し、リンクを #g6 にして、写真を替えます。
3. 6枚目以降は、サムネイルのグループ（グリッド）の「列数」を増やすと、2列目に並びます。
11枚以上にするとき
サムネイルの強調は10枚までです。それ以上にするときは、カスタムCSS に、枚数に合わせた位置の行を足してください。
見た目を変えるとき
- 左右のスライドが見切れる幅は、スライダーとサムネイルのグループの左右の余白（11%）を、同じ値に変えます。0 にすると見切れません。
- 写真の縦横比は、スライドの画像ブロックの「縦横比」（16:10）で変えます。
動作環境
サムネイルを押してもスライダーが動かないときは、VK All in One Expansion Unit の「スムーススクロール」の設定を「CSS のみ」にしてください。