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

基本の画像スライダーを作る方法

基本の画像スライダーをHTML・CSS・JavaScriptだけで作る方法を紹介します。前へ・次へボタンをクリックして画像を切り替えられるシンプルな構成のため、初めてスライダーを実装する方でも仕組みを理解しやすいサンプルです。

JavaScriptで現在表示している画像を管理し、ボタン操作に応じてスライドを切り替えます。ライブラリを使用せずに実装しているため、画像枚数の追加やデザイン変更などのカスタマイズもしやすく、自分のサイトへ取り入れやすい構成になっています。

商品画像の切り替え、フォトギャラリー、メインビジュアルなど、さまざまな場面で利用できます。まずは基本的な画像スライダーの仕組みを理解したい方や、シンプルな実装から始めたい方におすすめです。

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

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

デモ

このデモでは、「前へ」「次へ」ボタンをクリックすると画像を切り替えられます。基本的な画像スライダーの動作を確認できます。

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

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

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

      <!--
        初期表示する画像

        sample/images/ フォルダへ画像を配置し、
        下記を「画像ファイル名」に変更してください。

        例：
        images/sample1.jpg
      -->
      <img
        id="basic-image-slider-image"
        class="basic-image-slider_image"
        src="images/【ここに1枚目の画像ファイル名】"
        alt="スライダー画像">

    </div>

    <!-- 操作ボタン -->
    <div class="basic-image-slider_controls">

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

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

    </div>

  </div>

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

</body>
</html>

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

/* 画像スライダー全体 */
.basic-image-slider_demo{
  max-width:760px;  /* 最大横幅 */
  margin:0 auto;  /* 中央寄せ */
}

/* 画像表示エリア */
.basic-image-slider_box{
  overflow:hidden;  /* はみ出した画像を隠す */
  border:1px solid #dbeafe;  /* 枠線 */
  border-radius:18px;  /* 角丸 */
  background:#ffffff;  /* 背景色 */
  box-shadow:0 10px 30px rgba(15,23,42,.08);  /* 影 */
}

/* 画像 */
.basic-image-slider_image{
  display:block;  /* 画像下の余白を消す */
  width:100%;  /* 横幅いっぱい */
  height:auto;  /* 縦横比を保つ */
}

/* 操作ボタン */
.basic-image-slider_controls{
  display:flex;  /* 横並び */
  justify-content:center;  /* 中央寄せ */
  gap:16px;  /* ボタン間隔 */
  margin-top:24px;  /* 画像との間隔 */
}

/* 前へ・次へボタン */
.basic-image-slider_button{
  padding:12px 28px;  /* ボタン内側余白 */
  border:none;  /* 枠線なし */
  border-radius:999px;  /* 丸いボタン */
  background:#2563eb;  /* 背景色 */
  color:#ffffff;  /* 文字色 */
  font-size:16px;  /* 文字サイズ */
  font-weight:700;  /* 文字の太さ */
  cursor:pointer;  /* カーソル */
  transition:background .2s;  /* 色変化速度：.2s = 0.2秒 */
}

/* ボタンホバー */
.basic-image-slider_button:hover{
  background:#1d4ed8;  /* ホバー時の背景色 */
}

// 表示する画像一覧
//
// sample/images/ フォルダへ画像を配置し、
// 下記を実際の画像ファイル名へ変更してください。
//
// 例：
// images/sample1.jpg
// images/sample2.jpg
// images/sample3.jpg
const basicImageSliderImages=[
  "images/【ここに1枚目の画像ファイル名】",
  "images/【ここに2枚目の画像ファイル名】",
  "images/【ここに3枚目の画像ファイル名】"
];

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

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

// 前へボタンを取得
const basicImageSliderPrev=document.getElementById("basic-image-slider-prev");

// 次へボタンを取得
const basicImageSliderNext=document.getElementById("basic-image-slider-next");

// 前へボタンをクリック
basicImageSliderPrev.addEventListener("click",function(){

  // 1枚前の画像へ移動
  basicImageSliderIndex--;

  // 最初の画像より前なら最後の画像へ
  if(basicImageSliderIndex<0){

    basicImageSliderIndex=basicImageSliderImages.length-1;

  }

  // 画像を切り替える
  basicImageSliderImage.src=basicImageSliderImages[basicImageSliderIndex];

});

// 次へボタンをクリック
basicImageSliderNext.addEventListener("click",function(){

  // 1枚次の画像へ移動
  basicImageSliderIndex++;

  // 最後の画像を超えたら最初へ戻る
  if(basicImageSliderIndex>=basicImageSliderImages.length){

    basicImageSliderIndex=0;

  }

  // 画像を切り替える
  basicImageSliderImage.src=basicImageSliderImages[basicImageSliderIndex];

});

ファイル構成と設置方法

このサンプルは、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 の img タグの src 属性で指定し、スライダーで切り替える画像は script.js の basicImageSliderImages 配列へ画像ファイル名を設定します。

スライダーの横幅や角丸、枠線、背景色、ボタンの色やサイズなどのデザインは style.css で変更できます。画像の切り替え処理は script.js にまとめられており、このサンプルには自動再生や切り替え間隔などの時間設定はありません。