ビフォーアフター画像比較スライダーImage Compare Viewerを導入する方法

ビフォーアフター画像比較スライダーをWebサイトに簡単に追加したいとお考えの方に、Image Compare Viewerを使ったシンプルな方法をご紹介します。ビフォー・アフターの比較を直感的に行えるインタラクティブなコンテンツを手軽に導入できます。基本的な設置方法からカスタマイズオプションまで、簡単に導入できるステップを解説します。

デモ

デモページ

導入ステップ

ステップ1: 必要なファイルの読み込み

まず、以下のコードをHTMLファイルに追加して、image-compare-viewerのJavaScriptライブラリとCSSを読み込みます。このステップは非常に簡単で、必要なファイルをインクルードするだけで準備完了です。

<script src="https://unpkg.com/image-compare-viewer/dist/image-compare-viewer.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/image-compare-viewer/dist/image-compare-viewer.min.css">

ステップ2: 画像スライダーのHTMLを追加

次に、画像を比較するためのHTMLを作成します。比較対象となる２つの画像とその親のdivタグを配置するだけです。

<div class="before-after">
  <img src="img/before.jpg" alt="Before">
  <img src="img/after.jpg" alt="After">
</div>

ステップ3: JavaScriptで機能を追加

HTMLが準備できたら、次にJavaScriptで画像比較機能を有効にします。以下のコードを使って、スライダーの初期化とカスタマイズを行います。これで画像を比較できるようになります。

document.addEventListener('DOMContentLoaded', function () {
  const element = document.querySelector(".before-after");
  const options = {
    controlColor: "#fff",
    controlShadow: true,
    addCircle: true,
    showLabels: true,
    labelOptions: {
      before: 'ビフォー',
      after: 'アフター',
    },
  };
  const view = new ImageCompare(element, options).mount();
});

カスタマイズオプションの紹介

image-compare-viewerには、見た目や動作を細かくカスタマイズできるオプションが豊富に用意されています。

プロパティ	デフォルト	説明
controlColor	#FFFFFF	コントローラーの色
controlShadow	true	コントローラーに影を付けるかどうか
addCircle	false	コントローラーにサークルを付けるかどうか
addCircleBlur	true	コントローラーのサークルにぼかしを付けるかどうか
showLabels	false	ラベルを表示するかどうか
labelOptions	----	----
before	"Before"	ビフォーラベルの文字
after	"After"	アフターラベルの文字
onHover	false	ホバーした時に表示するかどうか
smoothing	true	アニメーションするかどうか
smoothingAmount	100	トランジションによるアニメーションが完了するまでの再生時間（ms）
hoverStart	false	ホバーした時にコントローラーが移動するかどうか
verticalMode	false	垂直モードかどうか
startingPoint	50	画像を表示する割合（%）
fluidMode	false	コンテナーに高さと幅を持たせるかどうか

参考リンク

もっと詳しく知りたい方は、公式サイトやGitHubリポジトリをチェックしてください。

• 公式サイト
• GitHubリポジトリ

このように、Image Compare Viewerを使えば簡単にプロフェッショナルなビフォーアフター画像比較スライダーを導入できます。手軽に使えるこのライブラリをぜひ活用してみてください。