![](https://cxg-design.jp/wp-content/uploads/2024/05/pictogram_thumb.png)
Smart Slider Proで、ライトボックススライダーを作成
Smart Slider 3 Proでは、スライダーに色々なアニメーションを付けたり、レスポンシブ対応のカルーセルを作成できたり出来ます。今回は、画像をクリックするとライトボックスでスライダーが表示される方法を紹介します。
![](https://cxg-design.jp/wp-content/uploads/2024/02/968b10ecd7cd11866d83b9d3d16dbeb1.png)
出典 : Smart Slider3
今回のDEMOは、ピクトグラムギャラリーです。
ブロックエディターの3カラムでギャラリーを作成しています。画像をクリックすると、スライダーがライトボックスで表示されます。色違い(白バック、黒バック)のピクトグラムを矢印で切り替えて見ることが出来ます。
画像
まず、画像を作成します。今回用意するのは、1つのピクトグラムに対し、サムネイル用の+マークが右下についた画像、白バック、黒バックの3点です。サムネイルはレイアウトによって白バック、黒バック分かれています。
スライダー作成
Smart Slider 3 Proでライトボックススライダーを作成します。
Smart Slider>Create Slider>Create a New Projectをクリックします。Project Typeをブロックにします。任意の名前を入力し、横800px、高さ800px、レイアウトBoxedに設定し、作成ボタンをクリックします。
スライドを追加>画像をクリックし、サムネイル画像を選択します。
![](https://cxg-design.jp/wp-content/uploads/2024/05/ef40be9df6e648bfdb817d139e5d4b0a.png)
横800px、高さ800px、レイアウトBoxedに設定
![](https://cxg-design.jp/wp-content/uploads/2024/05/1df1a2a54902b3578e9340d2aad2b4cb.png)
スライドを追加>画像をクリック
![](https://cxg-design.jp/wp-content/uploads/2024/05/0f714e5fb3c789e31b74b3d178852fe7.png)
サムネイル画像を選択
サムネイル画像をクリックし編集画面に移行します。スライド>コンテンツ>リンクの+をクリックします。Light Box>Content List – One Per Lineの画像選択をクリックします。メディアギャラリーからスライダーで表示したい順にクリックします。SUNGLASSは、白バックサムネイルなので、白バック、黒バックの順にクリックし選択ボタンをクリックします。
![](https://cxg-design.jp/wp-content/uploads/2024/05/6e30eb044b13e07c518ada9cdf6ba17a.png)
サムネイル画像をクリックし編集画面に移行
![](https://cxg-design.jp/wp-content/uploads/2024/05/5b021ab4aea6edc73dedbca8661e6c47.png)
スライド>コンテンツ>リンクの+をクリック
![](https://cxg-design.jp/wp-content/uploads/2024/05/2c12a4e7934a815285f6e17112a928a7.png)
Light Box>Content List – One Per Lineの画像選択をクリック
![](https://cxg-design.jp/wp-content/uploads/2024/05/c6223e2b5ead26ee25fc6e1e44f9855c.png)
白バック、黒バックの順にクリックし選択ボタンをクリック
Content List – One Per Lineに画像名がスライダー順で表示されます。OKなら挿入ボタンをクリックします。右上の保存ボタンをクリックして完成です。
他の8つのスライダーも同じように作成します。
![](https://cxg-design.jp/wp-content/uploads/2024/05/0ec6089fdb1a0720d2b171db12897817.png)
挿入ボタンをクリック
![](https://cxg-design.jp/wp-content/uploads/2024/05/a9629e1ce66f4457a12177aaca09a066.png)
右上の保存ボタンをクリックして完成
![](https://cxg-design.jp/wp-content/uploads/2024/05/a730f24aaec166a48ce9422bb0a521e2.png)
他の8つのスライダーも同じように作成
設置
スライダー作成時と同じようにショートコードで設置します。今回は、3カラムにショートコードを挿入しました。
![](https://cxg-design.jp/wp-content/uploads/2024/05/676c6eda26fda5fdc0f12cceeaaaaf89.png)
3カラムにショートコードを挿入
以上で、今回の説明は終了です。通常、ギャラリーのライトボックスは表示している画像になりますが、今回のDEMOの場合、それぞれ違うライトボックスが表示出来ます。また、ページに全てのカラーを表示しなくていいので、ギャラリーをコンパクトに使用できるのも魅力です。