画像を拡大表示できるスライダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

スライダー

画像を拡大表示できるスライダーを作る方法

画像を拡大表示できるスライダーを作る方法を紹介します。通常の画像スライダーに加えて、表示中の画像をクリックすると大きく確認できる拡大表示機能を付けたサンプルです。サムネイルや商品画像、作品ギャラリーなど、画像の細部まで見せたい場面で使いやすい構成になっています。

このサンプルでは、前へ・次へボタンで画像を切り替え、表示中の画像をクリックすると拡大表示エリアを開きます。拡大表示中は閉じるボタンで元の画面へ戻れるため、画像一覧と詳細確認を同じ画面内で完結できます。HTML、CSS、JavaScriptだけで実装できるので、WordPressに依存せず通常のWebページにも導入しやすい内容です。

ポートフォリオ、商品紹介、施工事例、写真ギャラリーなど、複数の画像を順番に見せながら必要に応じて大きく表示したい場合に便利です。画像パスや説明文、スライダーの見た目、切り替えボタンのデザインなどはコード内で変更できるため、サイトの雰囲気に合わせてカスタマイズできます。

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

デモ

サンプル画像

画像をクリックすると拡大表示できます。

このデモでは、前へ・次へボタンで画像を切り替え、表示中の画像をクリックして拡大表示できます。

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

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

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

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

  <!-- ページタイトル -->
  <title>画像を拡大表示できるスライダー</title>

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

</head>
<body>

  <!-- 画像拡大スライダー全体 -->
  <div class="image-zoom-slider_demo">

    <!-- 画像表示エリア -->
    <div class="image-zoom-slider_view">

      <!-- 表示中の画像 -->
      <img id="image-zoom-slider-main" class="image-zoom-slider_image" src="images/【ここに1枚目の画像ファイル名】" alt="画像1">

    </div>

    <!-- 操作説明 -->
    <div class="image-zoom-slider_notice">
      前へ・次へボタンで画像を切り替え、画像をクリックすると拡大表示できます。
    </div>

    <!-- 操作ボタン -->
    <div class="image-zoom-slider_buttons">
      <button class="image-zoom-slider_button" type="button" data-direction="prev">前へ</button>
      <button class="image-zoom-slider_button" type="button" data-direction="next">次へ</button>
    </div>

  </div>

  <!-- 拡大表示エリア -->
  <div class="image-zoom-slider_overlay" aria-hidden="true">

    <!-- 拡大画像ボックス -->
    <div class="image-zoom-slider_zoombox">

      <!-- 閉じるボタン -->
      <button class="image-zoom-slider_close" type="button">×</button>

      <!-- 拡大画像 -->
      <img class="image-zoom-slider_zoomimage" src="images/【ここに1枚目の画像ファイル名】" alt="拡大表示画像">

    </div>

  </div>

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

</body>
</html>

ファイル構成と設置方法

このサンプルは、HTML・CSS・JavaScriptを分けたシンプルな構成です。表示する画像は images フォルダへ配置し、index.html と script.js 内のファイル名を書き換えるだけで利用できます。 

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

sample フォルダ内へ各ファイルを配置し、使用する画像を sample/images/ フォルダへ保存してください。その後、index.html と script.js に記載されている画像ファイル名を実際の画像名へ変更し、sample/index.html をブラウザで開くと動作を確認できます。

スライド切り替え速度を変更したい場合は style.css の transition: .45s; を編集してください。例えば .20s = 0.2秒 にすると切り替えが速くなり、.80s = 0.8秒 にするとゆっくり切り替わります。

コメント