Jetpackでスライドして画像比較できるスライダーを作成
画像比較する時ビフォア、アフター両方の画像を表示することがあります。今回は、Jetpackでスライドして画像比較できるスライダーを作成する方法を紹介します。
出典 : Jetpack
今回のDEMOは、画像の加工前、加工後のスライダーです。
横、縦のスライダーを作成しました。中央のカーソルを動かすと、画像の表示面積が変わります。
横スライダー
プラグインをインストール、有効化します。編集画面のブロックエディターのブロック＞画像比較を選択します。比較前のアップロードボタンをクリックします。メディアライブラリから挿入したい画像を選択し、選択ボタンをクリックします。画像が挿入されます。同じように比較後にも画像を挿入します。これで完成です。プレビューを確認します。
ブロック＞画像比較を選択
比較前のアップロードボタンをクリック
挿入したい画像を選択
画像が挿入
比較後にも画像を挿入
プレビューを確認
縦スライダー
右サイドバーのブロック＞画像比較＞方向の縦並びを選択します。上下にカーソルを動かすことができるスライダーになります。プレビューを確認します。
画像比較＞方向の縦並びを選択
プレビューを確認
以上で今回の説明は終了です。記事やLPなどに簡単に設置できるので便利ですね。施工、清掃、画像加工など色々なページで使用できます。
