自動再生する画像スライダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

スライダー

自動再生する画像スライダーを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

自動再生する画像スライダーをHTML・CSS・JavaScriptだけで作る方法を紹介します。一定時間ごとに画像が自動で切り替わるため、トップページのメインビジュアルや商品紹介、ギャラリーなどで視線を集めたい場面に適したサンプルです。

JavaScriptのタイマー処理を利用して画像を一定間隔で切り替えるシンプルな構成となっており、ライブラリを使わずに実装できます。表示する画像の追加や変更も簡単に行えるため、用途に合わせてカスタマイズしやすいのが特徴です。

本記事では、自動再生する基本的な画像スライダーの作成方法を解説します。表示する画像やデザインを変更するだけで、さまざまなWebサイトへそのまま導入できる実用的なサンプルコードです。

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

デモ

このデモでは、約3秒ごとに画像が自動で切り替わります。操作をしなくても順番に画像が切り替わる基本的な自動再生スライダーを確認できます。

スライダー画像

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

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

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

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

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

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

    </div>

  </div>

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

</body>
</html>

ファイル構成と設置方法

このサンプルは、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 の autoImageSliderImages 配列へ画像ファイル名を設定します。

スライダーの横幅や枠線、角丸、背景色などのデザインは style.css で変更できます。画像の自動切り替え間隔は script.js の autoImageSliderInterval で設定します。3000 は3秒ごと、5000 は5秒ごと、1000 は1秒ごとに画像が切り替わります。数値を大きくすると切り替えが遅くなり、小さくすると速くなります。

コメント