自動再生する画像スライダーを作る方法【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などすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルと、スライダーで使用する3枚の画像で構成されています。HTMLでは画像を表示するエリアを作成し、CSSではスライダー全体の横幅や枠線、角丸、影などのデザインを設定します。JavaScriptでは表示する画像を配列で管理し、一定時間ごとに画像を切り替えることで自動再生する画像スライダーを実現します。
sample/
├── index.html
├── style.css
├── script.js
└── images/
├── 【ここに1枚目の画像ファイル名】
├── 【ここに2枚目の画像ファイル名】
└── 【ここに3枚目の画像ファイル名】
各ファイルの役割
index.htmlは自動再生する画像スライダー全体を構成するファイルです。初期表示する画像を指定し、style.cssとscript.jsを読み込みます。画像のファイル名は、imagesフォルダへ配置した実際の画像ファイル名へ変更してください。
style.cssはスライダーのデザインを設定するファイルです。スライダー全体の最大横幅、画像表示エリアの枠線、角丸、背景色、影などを変更できます。画像にはwidth:100%とheight:autoを指定し、表示エリアの横幅に合わせながら縦横比を維持します。
script.jsは画像の自動再生を制御するファイルです。3枚の画像を配列へ登録し、setInterval()を使用して一定時間ごとに次の画像へ切り替えます。最後の画像まで表示すると画像番号を0へ戻し、再び1枚目から繰り返し表示します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、sample/images/へ使用する3枚の画像を保存します。index.htmlとscript.jsに記載されているimages/【ここに1枚目の画像ファイル名】などを、実際に配置した画像ファイル名へ変更してください。
ファイルを配置したあと、sample/index.htmlをブラウザで開きます。ページを表示すると1枚目の画像から開始し、その後は設定した時間が経過するたびに2枚目、3枚目へ自動的に切り替わります。最後の画像まで到達すると1枚目へ戻り、そのまま自動再生を繰り返します。
カスタマイズできる内容
index.htmlでは最初に表示する画像やalt属性を変更できます。使用する画像を変更する場合は、index.htmlの初期画像とscript.jsの画像一覧を実際のファイル名へ合わせてください。
style.cssではスライダー全体の最大横幅、ページの余白、背景色、画像表示エリアの枠線、角丸、影などを変更できます。script.jsでは画像一覧を変更できるほか、自動再生の間隔を調整できます。
数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。40pxで上下、20pxで左右の余白を調整できます。
max-width:760px;
スライダー全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
border:1px solid #dbeafe;
画像表示エリアの枠線です。1pxを大きくすると枠線が太くなり、色コードを変更すると枠線の色を変更できます。
border-radius:18px;
画像表示エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
box-shadow:0 10px 30px rgba(15,23,42,.08);
画像表示エリアの影です。10pxや30pxを変更することで、影の位置や広がりを調整できます。
script.js
const autoImageSliderInterval=3000;
画像を自動で切り替える間隔です。3000は3000ミリ秒、つまり3秒を表します。5000へ変更すると5秒ごと、1000へ変更すると1秒ごとに画像が切り替わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。スライダー全体にmax-width:760px;を指定し、画像にはwidth:100%とheight:autoを指定しています。そのため、画面幅が狭くなるとスライダーと画像も横幅に合わせて縮小され、画像の縦横比を維持したまま表示できます。スマートフォン・タブレット・PCで利用できます。
コメント