ドラッグ・スワイプ対応スライダーを作る方法
ドラッグ・スワイプ対応スライダーをHTML・CSS・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="drag-swipe-slider_demo">
<!-- ドラッグ・スワイプを受け付ける表示エリア -->
<div class="drag-swipe-slider_box" id="drag-swipe-slider-box">
<!-- 横に動くスライド一覧 -->
<div class="drag-swipe-slider_track" id="drag-swipe-slider-track">
<!-- スライド1 -->
<div class="drag-swipe-slider_slide">
<img src="images/【ここに1枚目の画像ファイル名】" alt="画像1">
</div>
<!-- スライド2 -->
<div class="drag-swipe-slider_slide">
<img src="images/【ここに2枚目の画像ファイル名】" alt="画像2">
</div>
<!-- スライド3 -->
<div class="drag-swipe-slider_slide">
<img src="images/【ここに3枚目の画像ファイル名】" alt="画像3">
</div>
</div>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>
/* ページ全体 */
body{
margin:0; /* ページ外側の余白 */
padding:40px 20px; /* ページ内側の余白 */
background:#f8fafc; /* 背景色 */
font-family:sans-serif; /* フォント */
}
/* ドラッグ・スワイプ対応スライダー全体 */
.drag-swipe-slider_demo{
max-width:760px; /* 最大横幅 */
margin:0 auto; /* 中央寄せ */
}
/* ドラッグ・スワイプを受け付ける表示エリア */
.drag-swipe-slider_box{
overflow:hidden; /* はみ出した画像を隠す */
border:1px solid #dbeafe; /* 枠線 */
border-radius:18px; /* 角丸 */
background:#ffffff; /* 背景色 */
box-shadow:0 10px 30px rgba(15,23,42,.08); /* 影 */
cursor:grab; /* 通常時のカーソル */
touch-action:pan-y; /* 縦スクロールは残し、横スワイプを扱う */
}
/* ドラッグ中 */
.drag-swipe-slider_box.is-dragging{
cursor:grabbing; /* ドラッグ中のカーソル */
}
/* 横に動くスライド一覧 */
.drag-swipe-slider_track{
display:flex; /* 横並び */
transition:transform .35s ease; /* 戻る速度：.35s = 0.35秒 */
}
/* スライド */
.drag-swipe-slider_slide{
flex:0 0 100%; /* 1画面に1枚表示 */
user-select:none; /* ドラッグ中の文字選択を防ぐ */
}
/* 画像 */
.drag-swipe-slider_slide img{
display:block; /* 画像下の余白を消す */
width:100%; /* 横幅いっぱい */
height:auto; /* 縦横比を保つ */
pointer-events:none; /* 画像自体をドラッグ対象にしない */
}
// ドラッグ・スワイプを受け付ける表示エリアを取得
const dragSwipeSliderBox=document.getElementById("drag-swipe-slider-box");
// 横に動くスライド一覧を取得
const dragSwipeSliderTrack=document.getElementById("drag-swipe-slider-track");
// スライドをすべて取得
const dragSwipeSliderSlides=document.querySelectorAll(".drag-swipe-slider_slide");
// 現在表示しているスライド番号
let dragSwipeSliderIndex=0;
// ドラッグ開始位置
let dragSwipeSliderStartX=0;
// ドラッグした距離
let dragSwipeSliderMoveX=0;
// ドラッグ中か判定
let dragSwipeSliderDragging=false;
// 指定したスライドを表示
function dragSwipeSliderShow(index){
// 最初より前なら最初を表示
if(index<0){
dragSwipeSliderIndex=0;
// 最後より後なら最後を表示
}else if(index>=dragSwipeSliderSlides.length){
dragSwipeSliderIndex=dragSwipeSliderSlides.length-1;
// 通常の移動
}else{
dragSwipeSliderIndex=index;
}
// アニメーション付きで移動
dragSwipeSliderTrack.style.transition="transform .35s ease"; // .35s = 0.35秒
dragSwipeSliderTrack.style.transform=
"translateX(-"+(dragSwipeSliderIndex*100)+"%)";
}
// ドラッグ・スワイプ開始
function dragSwipeSliderStart(event){
dragSwipeSliderDragging=true;
dragSwipeSliderBox.classList.add("is-dragging");
dragSwipeSliderStartX=
event.touches ? event.touches[0].clientX : event.clientX;
dragSwipeSliderMoveX=0;
// ドラッグ中はアニメーションを無効
dragSwipeSliderTrack.style.transition="none";
}
// ドラッグ・スワイプ中
function dragSwipeSliderMove(event){
if(!dragSwipeSliderDragging){
return;
}
const currentX=
event.touches ? event.touches[0].clientX : event.clientX;
dragSwipeSliderMoveX=currentX-dragSwipeSliderStartX;
// ドラッグ量に合わせて移動
dragSwipeSliderTrack.style.transform=
"translateX(calc(-"+(dragSwipeSliderIndex*100)+"% + "+dragSwipeSliderMoveX+"px))";
}
// ドラッグ・スワイプ終了
function dragSwipeSliderEnd(){
if(!dragSwipeSliderDragging){
return;
}
dragSwipeSliderDragging=false;
dragSwipeSliderBox.classList.remove("is-dragging");
// 左へ一定以上動いたら次へ
if(dragSwipeSliderMoveX<-80){
dragSwipeSliderShow(dragSwipeSliderIndex+1);
// 右へ一定以上動いたら前へ
}else if(dragSwipeSliderMoveX>80){
dragSwipeSliderShow(dragSwipeSliderIndex-1);
// 一定未満なら元へ戻す
}else{
dragSwipeSliderShow(dragSwipeSliderIndex);
}
}
// マウス操作
dragSwipeSliderBox.addEventListener("mousedown",dragSwipeSliderStart);
window.addEventListener("mousemove",dragSwipeSliderMove);
window.addEventListener("mouseup",dragSwipeSliderEnd);
// タッチ操作
dragSwipeSliderBox.addEventListener("touchstart",dragSwipeSliderStart);
dragSwipeSliderBox.addEventListener("touchmove",dragSwipeSliderMove);
dragSwipeSliderBox.addEventListener("touchend",dragSwipeSliderEnd);
// 初期表示
dragSwipeSliderShow(0);
ファイル構成と設置方法
このサンプルは、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 タグへ画像ファイル名を指定してください。パソコンでは画像をドラッグ、スマートフォンではスワイプすることで画像を切り替えられます。
スライダーの横幅や角丸、背景色などは style.css で変更できます。画像が元の位置へ戻る速度は style.css と script.js の .35s で設定しており、0.35秒で切り替わります。数値を大きくするとゆっくり、小さくすると速くなります。また、script.js の判定値 80 は画像を切り替えるために必要なドラッグ・スワイプ距離（80px）です。数値を小さくすると少し動かすだけで切り替わり、大きくするとより大きくドラッグ・スワイプした場合のみ切り替わります。
コメント