画像をスライドするスライダーを作る方法
画像をスライドするスライダーを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用して、複数の画像を左右の矢印ボタンやドットナビゲーションで切り替えられるシンプルな画像スライダーを作成します。画像は横方向へスライドし、現在表示している画像も分かりやすく確認できます。
商品紹介ページ、ポートフォリオ、旅行写真のギャラリー、店舗紹介、企業サイトの実績紹介など、複数の画像を限られたスペースへ見やすく表示したい場面で活用できます。左右の矢印ボタンで前後の画像へ切り替えられるほか、ドットナビゲーションから表示したい画像へ直接移動できるため、直感的に操作できます。レスポンシブ対応のため、スマートフォン・タブレット・PCでもレイアウトを崩さず利用できます。
HTMLでは画像や代替テキストを変更でき、CSSではスライダー全体の横幅、余白、角丸、影、ボタンやドットのデザインを調整できます。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="image-slider_wrap">
<!-- 画像表示エリア -->
<div class="image-slider_box">
<!-- スライダー画像 -->
<img
id="image-slider-image"
class="image-slider_image"
src="images/image01.jpg"
alt="スライダー画像1">
</div>
<!-- 操作ボタン・ドット -->
<div class="image-slider_controls">
<!-- 前へボタン -->
<button
id="image-slider-prev"
class="image-slider_button"
type="button"
aria-label="前の画像">
‹
</button>
<!-- ドットナビゲーション -->
<div class="image-slider_dots">
<button
class="image-slider_dot is-active"
type="button"
aria-label="1枚目の画像">
</button>
<button
class="image-slider_dot"
type="button"
aria-label="2枚目の画像">
</button>
<button
class="image-slider_dot"
type="button"
aria-label="3枚目の画像">
</button>
</div>
<!-- 次へボタン -->
<button
id="image-slider-next"
class="image-slider_button"
type="button"
aria-label="次の画像">
›
</button>
</div>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>
/* ページ全体 */
body{
margin:0; /* ブラウザ標準の外側余白を削除 */
padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
background:#ffffff; /* ページ全体の背景色 */
color:#111827; /* ページ全体の基本文字色 */
font-family:sans-serif; /* ページ全体で使用するフォント */
}
/* スライダー全体と子要素 */
.image-slider_wrap,
.image-slider_wrap *{
box-sizing:border-box; /* paddingとborderを要素サイズへ含める */
}
/* スライダー全体 */
.image-slider_wrap{
width:100%; /* 画面幅に合わせて横幅を縮小 */
max-width:760px; /* 最大横幅。値を大きくするとスライダーが横に広がる */
margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
}
/* 画像表示エリア */
.image-slider_box{
overflow:hidden; /* 画像が角丸の外側へはみ出さないようにする */
border:1px solid #dbeafe; /* 画像表示エリアを囲む枠線 */
border-radius:18px; /* 角丸。値を大きくすると丸みが強くなる */
background:#ffffff; /* 画像読み込み前の背景色 */
box-shadow:0 10px 30px rgba(15,23,42,.08); /* 外側の影。数値を変更すると影の位置や広がりが変わる */
}
/* スライダー画像 */
.image-slider_image{
display:block; /* 画像下部に生じる余白を削除 */
width:100%; /* 画像表示エリアの横幅いっぱいに表示 */
height:auto; /* 画像の縦横比を維持して高さを自動調整 */
}
/* 操作ボタンとドットのエリア */
.image-slider_controls{
display:flex; /* 前へボタン・ドット・次へボタンを横並びにする */
align-items:center; /* 各要素を縦方向中央へ揃える */
justify-content:center; /* 各要素を横方向中央へ配置する */
gap:20px; /* 各要素の間隔。値を大きくすると間隔が広がる */
margin-top:24px; /* 画像と操作エリアの間隔。値を大きくすると広がる */
}
/* 前へボタンと次へボタン */
.image-slider_button{
display:flex; /* 矢印をボタン中央へ配置する */
align-items:center; /* 矢印を縦方向中央へ揃える */
justify-content:center; /* 矢印を横方向中央へ揃える */
flex-shrink:0; /* 画面幅が狭くてもボタンを縮小させない */
width:48px; /* ボタンの横幅。値を大きくするとボタンが大きくなる */
height:48px; /* ボタンの高さ。値を大きくするとボタンが大きくなる */
padding:0; /* ブラウザ標準の内側余白を削除 */
border:none; /* ブラウザ標準の枠線を削除 */
border-radius:50%; /* ボタンを円形にする */
background:#2563eb; /* ボタンの背景色 */
color:#ffffff; /* 矢印の文字色 */
font-family:Arial,sans-serif; /* 矢印表示に使用するフォント */
font-size:28px; /* 矢印の文字サイズ。値を大きくすると矢印が大きくなる */
font-weight:700; /* 矢印を太くする */
line-height:1; /* 矢印の上下位置を整える */
cursor:pointer; /* マウスカーソルを指型へ変更 */
transition:background-color .2s ease;
/*
0.2秒でボタンの背景色を切り替える。
値を大きくするとゆっくり、小さくすると速くなる。
*/
}
/* ボタンへマウスを重ねた状態 */
.image-slider_button:hover{
background:#1d4ed8; /* マウスを重ねたときの背景色 */
}
/* ドットナビゲーション */
.image-slider_dots{
display:flex; /* ドットを横並びにする */
align-items:center; /* ドットを縦方向中央へ揃える */
justify-content:center; /* ドットを横方向中央へ配置する */
gap:10px; /* ドット同士の間隔。値を大きくすると間隔が広がる */
}
/* 各ドット */
.image-slider_dot{
width:12px; /* ドットの横幅。値を大きくするとドットが大きくなる */
height:12px; /* ドットの高さ。値を大きくするとドットが大きくなる */
padding:0; /* ブラウザ標準の内側余白を削除 */
border:none; /* ブラウザ標準の枠線を削除 */
border-radius:50%; /* ドットを円形にする */
background:#cbd5e1; /* 通常時のドット背景色 */
cursor:pointer; /* マウスカーソルを指型へ変更 */
transition:background-color .2s ease;
/*
0.2秒でドットの色を切り替える。
値を大きくするとゆっくり、小さくすると速くなる。
*/
}
/* 表示中の画像に対応するドット */
.image-slider_dot.is-active{
background:#2563eb; /* 選択中のドット背景色 */
}
/* 画面幅640px以下 */
@media(max-width:640px){
/* ページ全体 */
body{
padding:24px 12px; /* スマートフォンでは画面端の余白を小さくする */
}
/* スライダー全体 */
.image-slider_wrap{
margin:24px auto; /* スマートフォンでは上下余白を小さくする */
}
/* 操作ボタンとドットのエリア */
.image-slider_controls{
gap:14px; /* スマートフォンでは各要素の間隔を小さくする */
margin-top:18px; /* スマートフォンでは画像との間隔を小さくする */
}
/* 前へボタンと次へボタン */
.image-slider_button{
width:44px; /* スマートフォンではボタンの横幅を小さくする */
height:44px; /* スマートフォンではボタンの高さを小さくする */
font-size:25px; /* スマートフォンでは矢印を少し小さくする */
}
/* 各ドット */
.image-slider_dot{
width:10px; /* スマートフォン用のドット横幅 */
height:10px; /* スマートフォン用のドット高さ */
}
}
// スライダーで使用する画像情報
const imageSliderImages=[
{
src:"images/image01.jpg",
alt:"スライダー画像1"
},
{
src:"images/image02.jpg",
alt:"スライダー画像2"
},
{
src:"images/image03.jpg",
alt:"スライダー画像3"
}
];
// 現在表示している画像番号
// 0は1枚目、1は2枚目、2は3枚目を表す
let imageSliderIndex=0;
// 表示する画像要素を取得
const imageSliderImage=document.getElementById(
"image-slider-image"
);
// 前の画像へ切り替えるボタンを取得
const imageSliderPrev=document.getElementById(
"image-slider-prev"
);
// 次の画像へ切り替えるボタンを取得
const imageSliderNext=document.getElementById(
"image-slider-next"
);
// すべてのドットを取得
const imageSliderDots=document.querySelectorAll(
".image-slider_dot"
);
// 画像とドットの表示を更新する共通処理
function updateImageSlider(){
// 現在の画像番号に対応する画像へ変更
imageSliderImage.src=
imageSliderImages[imageSliderIndex].src;
// 現在の画像に対応する代替テキストへ変更
imageSliderImage.alt=
imageSliderImages[imageSliderIndex].alt;
// 各ドットの選択状態を更新
imageSliderDots.forEach(function(dot,index){
// 表示中の画像に対応するドットだけ選択状態にする
dot.classList.toggle(
"is-active",
index===imageSliderIndex
);
});
}
// 前へボタンをクリックした時
imageSliderPrev.addEventListener("click",function(){
// 画像番号を1つ戻す
imageSliderIndex--;
// 1枚目より前へ移動した場合は3枚目へ戻す
if(imageSliderIndex<0){
imageSliderIndex=imageSliderImages.length-1;
}
// 画像とドットの表示を更新
updateImageSlider();
});
// 次へボタンをクリックした時
imageSliderNext.addEventListener("click",function(){
// 画像番号を1つ進める
imageSliderIndex++;
// 3枚目より先へ移動した場合は1枚目へ戻す
if(imageSliderIndex>=imageSliderImages.length){
imageSliderIndex=0;
}
// 画像とドットの表示を更新
updateImageSlider();
});
// 各ドットへクリック処理を設定
imageSliderDots.forEach(function(dot,index){
// ドットをクリックした時
dot.addEventListener("click",function(){
// クリックしたドットに対応する画像番号へ変更
imageSliderIndex=index;
// 画像とドットの表示を更新
updateImageSlider();
});
});
// ページを開いた時の初期表示を設定
updateImageSlider();
コードをコピーする場合
使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合
HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルと、スライダーで表示する画像3枚で構成されています。HTMLではスライダー本体と操作ボタン、ドットナビゲーションを配置し、CSSではレイアウトやデザイン、レスポンシブ表示を設定します。JavaScriptでは画像の切り替え、前へ・次へボタン、ドットクリック時の表示切り替えを行います。画像ファイルを差し替えるだけで別のスライダーとして利用できるため、初心者でも導入しやすい構成です。
sample/
├── index.html
├── style.css
├── script.js
└── images/
├── image01.jpg
├── image02.jpg
└── image03.jpg
各ファイルの役割
index.htmlはスライダー本体を構成するファイルです。画像表示エリア、前へ・次へボタン、ドットナビゲーションを配置しています。
style.cssはスライダー全体のデザインを設定します。横幅、余白、画像サイズ、ボタン、ドット、角丸、影などを変更できます。
script.jsは画像の切り替え処理を行います。前へ・次へボタン、ドットクリック時の表示切り替え、現在表示中のドット更新を担当します。
imagesフォルダには表示する画像を保存します。JavaScriptで指定したファイル名と一致する画像を配置してください。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。続いてsample/images/フォルダを作成し、その中へimage01.jpg、image02.jpg、image03.jpgを配置してください。画像ファイル名はJavaScriptで指定している名前と一致させる必要があります。その後、sample/index.htmlをブラウザで開くとスライダーを確認できます。
カスタマイズできる内容
index.htmlではタイトルや説明文を変更できます。
style.cssではスライダー全体の横幅、余白、背景色、画像サイズ、ボタンの色・サイズ・位置、ドットの大きさ、角丸、影などを自由に変更できます。
script.jsでは表示する画像を追加・変更できます。画像を変更する場合は、配列内のファイル名を書き換え、対応する画像をsample/images/へ配置してください。画像を増やす場合は同じ形式で配列へ追加すると、自動的に切り替え対象になります。
数値調整
style.css
max-width:760px;
スライダー全体の最大横幅です。値を大きくすると横幅が広がり、小さくするとコンパクトになります。
border-radius:18px;
スライダー全体の角丸です。値を大きくすると丸みが強くなります。
padding
ボタンの大きさを変更できます。値を大きくすると押しやすくなります。
transition:0.2s;
ボタン色が変わる時間です。0.2秒で切り替わります。値を大きくするとゆっくり、小さくすると速くなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-widthにより画面幅に合わせてスライダー全体が縮小されます。画像も横幅に合わせて自動的に縮小表示されるため、スマートフォン・タブレット・PCで利用できます。
コメント