2枚の画像を比較できるスライダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

スライダー

2枚の画像を比較できるスライダーを作る方法

2枚の画像を比較できるスライダーを作る方法を紹介します。このサンプルでは、1枚の画像をもう1枚の画像の上へ重ねて表示し、中央のスライダーを左右へドラッグすることで表示範囲を変更できます。同じ位置に配置した2枚の画像を直感的に比較できるため、画像の違いや変化を分かりやすく伝えられます。

Before・After画像の比較はもちろん、写真の加工前後、リフォーム前後、デザイン変更前後、AI画像の生成結果比較など、2枚の画像を見比べたい場面で便利です。HTML、CSS、JavaScriptだけで実装できるため、ライブラリを追加せずに導入できます。また、表示する画像を差し替えるだけで、さまざまな用途へ応用できます。

ドラッグ操作によって比較位置を自由に変更できるので、細かな違いも確認しやすいのが特徴です。比較画像の変更やサイズ調整、デザインのカスタマイズも行いやすく、商品紹介ページやポートフォリオ、施工事例など、実際のWebサイトでも利用しやすい画像比較スライダーです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

画像1
画像2
画像1
画像2

中央のバーを左右へドラッグすると2枚の画像を比較できます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>2枚の画像を比較できるスライダー</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- 画像比較スライダー全体 -->
  <div class="image-comparison-slider_demo">

    <!-- 画像比較エリア -->
    <div class="image-comparison-slider_box" id="image-comparison-slider-box">

      <!-- 下に表示する画像 -->
      <img class="image-comparison-slider_base" src="images/【ここに1枚目の画像ファイル名】" alt="画像1">

      <!-- 上に重ねる画像 -->
      <div class="image-comparison-slider_cover" id="image-comparison-slider-cover">
        <img src="images/【ここに2枚目の画像ファイル名】" alt="画像2">
      </div>

      <!-- ドラッグする中央バー -->
      <div class="image-comparison-slider_handle" id="image-comparison-slider-handle"></div>

      <!-- 左側ラベル -->
      <div class="image-comparison-slider_label image-comparison-slider_label-left">
        画像1
      </div>

      <!-- 右側ラベル -->
      <div class="image-comparison-slider_label image-comparison-slider_label-right">
        画像2
      </div>

    </div>

    <!-- 操作説明 -->
    <div class="image-comparison-slider_notice">
      中央のバーを左右へドラッグすると、2枚の画像を比較できます。
    </div>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

ファイル構成と設置方法

このサンプルは、HTML・CSS・JavaScriptを分けたシンプルな構成です。比較したい2枚の画像を images フォルダへ配置し、index.html に記載されている画像ファイル名を書き換えるだけで利用できます。JavaScriptは画像比較バーのドラッグ操作を制御する役割を持っています。 

sample/
├── index.html
├── style.css
├── script.js
└── images/
    ├── （1枚目の画像）
    └── （2枚目の画像）

sample フォルダ内へ各ファイルを配置し、比較したい2枚の画像を sample/images/ フォルダへ保存してください。次に、index.html の images/【ここに1枚目の画像ファイル名】 と images/【ここに2枚目の画像ファイル名】 を実際の画像ファイル名へ変更します。設定後に sample/index.html をブラウザで開くと、中央のバーを左右へドラッグして2枚の画像を比較できます。

コメント