Jetpackでスライドして画像比較できるスライダーを作成

画像比較する時ビフォア、アフター両方の画像を表示することがあります。今回は、Jetpackでスライドして画像比較できるスライダーを作成する方法を紹介します。

今回のDEMOは、画像の加工前、加工後のスライダーです。

横、縦のスライダーを作成しました。中央のカーソルを動かすと、画像の表示面積が変わります。

横スライダー

プラグインをインストール、有効化します。編集画面のブロックエディターのブロック＞画像比較を選択します。比較前のアップロードボタンをクリックします。メディアライブラリから挿入したい画像を選択し、選択ボタンをクリックします。画像が挿入されます。同じように比較後にも画像を挿入します。これで完成です。プレビューを確認します。

縦スライダー

右サイドバーのブロック＞画像比較＞方向の縦並びを選択します。上下にカーソルを動かすことができるスライダーになります。プレビューを確認します。

以上で今回の説明は終了です。記事やLPなどに簡単に設置できるので便利ですね。施工、清掃、画像加工など色々なページで使用できます。