全画面画像スライダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

全画面画像スライダーを作る方法

全画面画像スライダーをHTML・CSS・JavaScriptで作る方法を紹介します。画面いっぱいに画像を表示し、「前へ」「次へ」ボタンで画像を切り替えられるサンプルです。トップページのメインビジュアルやランディングページのファーストビューなど、画像を大きく見せたい場面に使いやすい構成です。

このサンプルでは、スライダーの高さを画面の高さに合わせ、画像を背景のように大きく表示します。JavaScriptで現在の画像を管理し、ボタン操作に合わせて表示する画像を切り替えます。余白の少ない迫力のある見た目にできるため、写真や商品イメージを印象的に見せたい場合に便利です。

表示する画像は自由に差し替えられ、CSSで画像の表示方法やボタンの位置を調整できます。ライブラリを使わずに実装できるため、全画面画像スライダーの基本的な作り方を理解したい方にもおすすめです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

このデモでは、画面いっぱいに画像を表示する全画面画像スライダーを確認できます。「前へ」「次へ」ボタンをクリックすると画像が切り替わります。

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

<!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="fullscreen-image-slider_demo">

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

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

      <!-- 前へボタン -->
      <button
        class="fullscreen-image-slider_button fullscreen-image-slider_prev"
        type="button"
        id="fullscreen-image-slider-prev"
        aria-label="前へ">
      </button>

      <!-- 次へボタン -->
      <button
        class="fullscreen-image-slider_button fullscreen-image-slider_next"
        type="button"
        id="fullscreen-image-slider-next"
        aria-label="次へ">
      </button>

    </div>

  </div>

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

</body>
</html>

/* ページ全体 */
body{
  margin:0;  /* ページ外側の余白 */
  background:#f8fafc;  /* 背景色 */
  font-family:sans-serif;  /* フォント */
}

/* 全画面画像スライダー全体 */
.fullscreen-image-slider_demo{
  width:100%;  /* 横幅いっぱい */
}

/* 画像表示エリア */
.fullscreen-image-slider_box{
  position:relative;  /* ボタン配置の基準 */
  height:100vh;  /* 画面の高さに合わせる */
  min-height:420px;  /* 最小高さ */
  overflow:hidden;  /* はみ出し非表示 */
  background:#0f172a;  /* 背景色 */
}

/* 表示画像 */
.fullscreen-image-slider_image{
  display:block;  /* 画像下の余白を消す */
  width:100%;  /* 横幅いっぱい */
  height:100%;  /* 高さいっぱい */
  object-fit:cover;  /* 画面いっぱいに表示 */
}

/* 前へ・次へボタン */
.fullscreen-image-slider_button{
  position:absolute;  /* 画像の上に配置 */
  top:50%;  /* 縦中央 */
  transform:translateY(-50%);  /* 中央位置を調整 */
  width:56px;  /* ボタン幅 */
  height:56px;  /* ボタン高さ */
  padding:0;
  border:none;
  border-radius:50%;  /* 円形 */
  background:#ffffff;  /* 背景色 */
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.15);  /* 影 */
}

/* CSSで矢印を描画 */
.fullscreen-image-slider_button::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:12px;  /* 矢印サイズ */
  height:12px;  /* 矢印サイズ */
  border-top:4px solid #2563eb;  /* 矢印線 */
  border-right:4px solid #2563eb;  /* 矢印線 */
}

/* 前へボタン */
.fullscreen-image-slider_prev{
  left:24px;  /* 左からの位置 */
}

/* 前へ矢印 */
.fullscreen-image-slider_prev::before{
  transform:translate(-35%,-50%) rotate(-135deg);
}

/* 次へボタン */
.fullscreen-image-slider_next{
  right:24px;  /* 右からの位置 */
}

/* 次へ矢印 */
.fullscreen-image-slider_next::before{
  transform:translate(-65%,-50%) rotate(45deg);
}

// 表示する画像一覧
//
// sample/images/ フォルダへ画像を配置し、
// 下記を実際の画像ファイル名へ変更
const fullscreenImageSliderImages=[
  "images/【ここに1枚目の画像ファイル名】",
  "images/【ここに2枚目の画像ファイル名】",
  "images/【ここに3枚目の画像ファイル名】"
];

// 現在表示している画像番号
let fullscreenImageSliderIndex=0;

// 画像要素を取得
const fullscreenImageSliderImage=document.getElementById("fullscreen-image-slider-image");

// 前へボタンをクリック
document.getElementById("fullscreen-image-slider-prev").addEventListener("click",function(){

  fullscreenImageSliderIndex--;

  if(fullscreenImageSliderIndex<0){
    fullscreenImageSliderIndex=fullscreenImageSliderImages.length-1;
  }

  fullscreenImageSliderImage.src=fullscreenImageSliderImages[fullscreenImageSliderIndex];

});

// 次へボタンをクリック
document.getElementById("fullscreen-image-slider-next").addEventListener("click",function(){

  fullscreenImageSliderIndex++;

  if(fullscreenImageSliderIndex>=fullscreenImageSliderImages.length){
    fullscreenImageSliderIndex=0;
  }

  fullscreenImageSliderImage.src=fullscreenImageSliderImages[fullscreenImageSliderIndex];

});

ファイル構成と設置方法

このサンプルは、HTML・CSS・JavaScriptの3ファイルで構成されています。HTMLで全画面スライダーのレイアウトを作成し、CSSで画面いっぱいに画像を表示するデザインやナビゲーションボタンを設定し、JavaScriptで画像の切り替え処理を行います。表示する画像は sample/images/ フォルダへ配置して利用します。

sample/
├── index.html
├── style.css
├── script.js
└── images/
    ├── 【ここに1枚目の画像】
    ├── 【ここに2枚目の画像】
    └── 【ここに3枚目の画像】

sampleフォルダをそのまま配置し、ブラウザで sample/index.html を開くと全画面画像スライダーを確認できます。使用する画像は sample/images/ フォルダへ配置し、index.html のメイン画像および script.js の画像一覧へ画像ファイル名を指定してください。

画像の表示方法やボタンのサイズ・位置・色は style.css で変更できます。スライダーの高さは .fullscreen-image-slider_box の height で設定しており、100vh は画面の高さいっぱいに表示する設定です。表示する画像の枚数を増やす場合は、script.js の画像一覧へ画像ファイル名を追加してください。