ドラッグ・スワイプ対応カルーセルを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

ドラッグ・スワイプ対応カルーセルを作る方法

ドラッグ・スワイプ対応カルーセルを作る方法を紹介します。PCではマウスドラッグ、スマートフォンやタブレットではスワイプ操作でスライドを切り替えられるサンプルです。左右の矢印ボタンやドットナビにも対応しているため、さまざまな操作方法で快適に利用できます。商品紹介やギャラリー、メインビジュアルなど幅広い用途で利用できます。

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

ご利用について 商用・個人利用を問わずご利用いただけますが、利用によって発生した損害等については責任を負いかねます。

デモ

ドラッグで切り替え

PCではマウスドラッグでスライドを切り替えられます。

詳しく見る

スワイプにも対応

スマートフォンでは指で左右にスワイプして操作できます。

詳細を見る

ボタン操作も可能

矢印ボタンやドットナビでもスライドを切り替えられます。

確認する

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

<!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-carousel_demo">

    <!-- カルーセル表示エリア -->
    <div class="drag-swipe-carousel_view">

      <!-- 横にスライドする一覧 -->
      <div class="drag-swipe-carousel_track" id="drag-swipe-carousel-track">

        <!-- スライド1 -->
        <div class="drag-swipe-carousel_slide">
          <div class="drag-swipe-carousel_content">
            <div class="drag-swipe-carousel_title">ドラッグで切り替え</div>
            <p class="drag-swipe-carousel_text">
              PCではマウスドラッグでスライドを切り替えられます。
            </p>
            <a href="#" class="drag-swipe-carousel_link">詳しく見る</a>
          </div>
        </div>

        <!-- スライド2 -->
        <div class="drag-swipe-carousel_slide">
          <div class="drag-swipe-carousel_content">
            <div class="drag-swipe-carousel_title">スワイプにも対応</div>
            <p class="drag-swipe-carousel_text">
              スマートフォンでは指で左右にスワイプして操作できます。
            </p>
            <a href="#" class="drag-swipe-carousel_link">詳細を見る</a>
          </div>
        </div>

        <!-- スライド3 -->
        <div class="drag-swipe-carousel_slide">
          <div class="drag-swipe-carousel_content">
            <div class="drag-swipe-carousel_title">ボタン操作も可能</div>
            <p class="drag-swipe-carousel_text">
              矢印ボタンやドットナビでもスライドを切り替えられます。
            </p>
            <a href="#" class="drag-swipe-carousel_link">確認する</a>
          </div>
        </div>

      </div>

      <!-- 前へボタン -->
      <button class="drag-swipe-carousel_arrow drag-swipe-carousel_prev" type="button" id="drag-swipe-carousel-prev" aria-label="前へ">
        前へ
      </button>

      <!-- 次へボタン -->
      <button class="drag-swipe-carousel_arrow drag-swipe-carousel_next" type="button" id="drag-swipe-carousel-next" aria-label="次へ">
        次へ
      </button>

      <!-- ドットナビ -->
      <div class="drag-swipe-carousel_dots">
        <button class="drag-swipe-carousel_dot is-active" type="button" data-index="0" aria-label="スライド1"></button>
        <button class="drag-swipe-carousel_dot" type="button" data-index="1" aria-label="スライド2"></button>
        <button class="drag-swipe-carousel_dot" type="button" data-index="2" aria-label="スライド3"></button>
      </div>

    </div>

  </div>

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

</body>
</html>

/* ページ全体 */
body{
  margin:0;  /* ページ外側の余白 */
  font-family:sans-serif;  /* 使用するフォント */
  background:#f8fafc;  /* ページ背景色 */
}

/* カルーセル全体 */
.drag-swipe-carousel_demo{
  max-width:1000px;  /* 最大横幅：大きくするとカルーセル全体が広くなる */
  margin:40px auto;  /* 上下余白と中央寄せ */
}

/* 表示エリア */
.drag-swipe-carousel_view{
  position:relative;  /* ボタン配置の基準 */
  overflow:hidden;  /* はみ出したスライドを隠す */
  border-radius:24px;  /* 角丸 */
  background:#e0f2fe;  /* 背景色 */
  touch-action:pan-y;  /* 縦スクロールを許可し横スワイプを有効にする */
  user-select:none;  /* ドラッグ時の文字選択を防ぐ */
}

/* スライド一覧 */
.drag-swipe-carousel_track{
  display:flex;  /* 横並び */
  transition:transform .4s ease;  /* スライド速度：.4sを大きくすると遅く、小さくすると速くなる */
  cursor:grab;  /* 通常時カーソル */
}

/* ドラッグ中 */
.drag-swipe-carousel_track.is-dragging{
  transition:none;  /* ドラッグ中は追従させる */
  cursor:grabbing;  /* ドラッグ中カーソル */
}

/* スライド共通 */
.drag-swipe-carousel_slide{
  flex:0 0 100%;  /* 常に1枚表示 */
  min-height:420px;  /* 高さ：変更するとスライド全体の高さが変わる */
  padding:56px;  /* 内側余白 */
  box-sizing:border-box;  /* paddingを幅に含める */
  display:flex;  /* 中央配置 */
  align-items:center;  /* 縦中央 */
  background:linear-gradient(135deg,#2563eb,#dbeafe);  /* 背景色 */
}

/* スライド2 */
.drag-swipe-carousel_slide:nth-child(2){
  background:linear-gradient(135deg,#1e40af,#bfdbfe);
}

/* スライド3 */
.drag-swipe-carousel_slide:nth-child(3){
  background:linear-gradient(135deg,#0f172a,#dbeafe);
}

/* 文字エリア */
.drag-swipe-carousel_content{
  max-width:460px;  /* 最大横幅 */
  margin:0 72px;  /* 左右余白 */
  color:#ffffff;  /* 文字色 */
}

/* タイトル */
.drag-swipe-carousel_title{
  margin:0 0 16px;  /* 下余白 */
  font-size:38px;  /* タイトル文字サイズ */
  font-weight:700;  /* 文字の太さ */
  line-height:1.3;  /* 行間 */
}

/* 説明文 */
.drag-swipe-carousel_text{
  margin:0 0 24px;  /* 下余白 */
  font-size:16px;  /* 文字サイズ */
  line-height:1.8;  /* 行間 */
}

/* ボタン */
.drag-swipe-carousel_link{
  display:inline-flex;  /* ボタン表示 */
  justify-content:center;  /* 横中央 */
  align-items:center;  /* 縦中央 */
  min-width:150px;  /* 最小横幅 */
  height:46px;  /* ボタン高さ */
  padding:0 20px;  /* 左右余白 */
  border-radius:999px;  /* 丸ボタン */
  background:#ffffff;  /* 背景色 */
  color:#2563eb;  /* 文字色 */
  text-decoration:none;  /* 下線なし */
  font-weight:700;  /* 文字の太さ */
}

/* 矢印ボタン */
.drag-swipe-carousel_arrow{
  position:absolute;  /* 表示エリア上に配置 */
  top:50%;  /* 縦中央 */
  width:44px;  /* ボタン横幅 */
  height:44px;  /* ボタン高さ */
  padding:0;  /* 内側余白なし */
  border:none;  /* 枠線なし */
  border-radius:50%;  /* 円形 */
  background:#ffffff;  /* 背景色 */
  transform:translateY(-50%);  /* 縦中央補正 */
  cursor:pointer;  /* カーソル */
  box-shadow:0 10px 22px rgba(15,23,42,.18);  /* 影 */
  font-size:0;  /* ボタン内文字を非表示 */
  z-index:5;  /* 前面表示 */
}

/* 矢印アイコン */
.drag-swipe-carousel_arrow::before{
  content:"";  /* 矢印 */
  position:absolute;  /* ボタン中央配置 */
  top:50%;  /* 縦中央 */
  left:50%;  /* 横中央 */
  width:11px;  /* 矢印横幅 */
  height:11px;  /* 矢印高さ */
  border-top:3px solid #2563eb;  /* 矢印色 */
  border-right:3px solid #2563eb;  /* 矢印色 */
}

/* 前へボタン */
.drag-swipe-carousel_prev{
  left:20px;  /* 左位置 */
}

/* 前へ矢印 */
.drag-swipe-carousel_prev::before{
  transform:translate(-40%,-50%) rotate(-135deg);  /* 左向き矢印 */
}

/* 次へボタン */
.drag-swipe-carousel_next{
  right:20px;  /* 右位置 */
}

/* 次へ矢印 */
.drag-swipe-carousel_next::before{
  transform:translate(-60%,-50%) rotate(45deg);  /* 右向き矢印 */
}

/* ドットナビ */
.drag-swipe-carousel_dots{
  position:absolute;  /* 表示エリア内 */
  left:0;
  right:0;
  bottom:22px;  /* 下位置 */
  display:flex;  /* 横並び */
  justify-content:center;  /* 中央寄せ */
  gap:10px;  /* ドット間隔 */
}

/* ドット */
.drag-swipe-carousel_dot{
  width:12px;  /* 横幅 */
  height:12px;  /* 高さ */
  padding:0;  /* 内側余白なし */
  border:none;  /* 枠線なし */
  border-radius:50%;  /* 円形 */
  background:rgba(255,255,255,.55);  /* 通常色 */
  cursor:pointer;  /* カーソル */
}

/* 選択中ドット */
.drag-swipe-carousel_dot.is-active{
  background:#ffffff;  /* 選択中の色 */
}

/* スマホ表示 */
@media(max-width:600px){

  .drag-swipe-carousel_slide{
    min-height:360px;  /* スマホ時の高さ */
    padding:48px 24px;  /* スマホ時の余白 */
  }

  .drag-swipe-carousel_content{
    margin:0 52px;  /* 左右余白 */
  }

  .drag-swipe-carousel_title{
    font-size:28px;  /* タイトルサイズ */
  }

  .drag-swipe-carousel_arrow{
    width:38px;  /* ボタン横幅 */
    height:38px;  /* ボタン高さ */
  }

}

// スライド一覧を取得
const dragSwipeCarouselTrack = document.getElementById("drag-swipe-carousel-track");

// 前へボタンを取得
const dragSwipeCarouselPrev = document.getElementById("drag-swipe-carousel-prev");

// 次へボタンを取得
const dragSwipeCarouselNext = document.getElementById("drag-swipe-carousel-next");

// ドットナビを取得
const dragSwipeCarouselDots = document.querySelectorAll(".drag-swipe-carousel_dot");

// スライドを取得
const dragSwipeCarouselSlides = document.querySelectorAll(".drag-swipe-carousel_slide");

// 現在表示しているスライド番号
let dragSwipeCarouselCurrent = 0;

// ドラッグ開始位置
let dragSwipeCarouselStartX = 0;

// ドラッグ移動量
let dragSwipeCarouselMoveX = 0;

// ドラッグ中かどうか
let dragSwipeCarouselDragging = false;

// スライド総数
const dragSwipeCarouselTotal = dragSwipeCarouselSlides.length;

// スライドを切り替える距離
// 80 = 約80pxドラッグすると切り替わる
const dragSwipeCarouselThreshold = 80;

// スライドを表示する
function dragSwipeCarouselShow(index){

  // 1枚目より前なら最後へ移動
  if(index < 0){

    dragSwipeCarouselCurrent = dragSwipeCarouselTotal - 1;

  // 最後より次なら1枚目へ戻る
  }else if(index >= dragSwipeCarouselTotal){

    dragSwipeCarouselCurrent = 0;

  // 通常移動
  }else{

    dragSwipeCarouselCurrent = index;

  }

  // アニメーションを有効化
  dragSwipeCarouselTrack.classList.remove("is-dragging");

  // スライド位置を更新
  dragSwipeCarouselTrack.style.transform =
    "translateX(-" + (dragSwipeCarouselCurrent * 100) + "%)";

  // ドットをリセット
  dragSwipeCarouselDots.forEach(function(dot){

    dot.classList.remove("is-active");

  });

  // 現在のドットを選択
  dragSwipeCarouselDots[dragSwipeCarouselCurrent].classList.add("is-active");

}

// ドラッグ開始
dragSwipeCarouselTrack.addEventListener("pointerdown", function(event){

  // ドラッグ開始
  dragSwipeCarouselDragging = true;

  // 開始位置を保存
  dragSwipeCarouselStartX = event.clientX;

  // 移動量をリセット
  dragSwipeCarouselMoveX = 0;

  // ドラッグ中クラスを追加
  dragSwipeCarouselTrack.classList.add("is-dragging");

  // Pointer Eventsを有効化
  dragSwipeCarouselTrack.setPointerCapture(event.pointerId);

});

// ドラッグ中
dragSwipeCarouselTrack.addEventListener("pointermove", function(event){

  // ドラッグ中以外は終了
  if(!dragSwipeCarouselDragging){
    return;
  }

  // ドラッグ量を計算
  dragSwipeCarouselMoveX = event.clientX - dragSwipeCarouselStartX;

  // ドラッグ量に合わせてスライドを移動
  dragSwipeCarouselTrack.style.transform =
    "translateX(calc(-" +
    (dragSwipeCarouselCurrent * 100) +
    "% + " +
    dragSwipeCarouselMoveX +
    "px))";

});

// ドラッグ終了
dragSwipeCarouselTrack.addEventListener("pointerup", function(){

  // ドラッグしていないなら終了
  if(!dragSwipeCarouselDragging){
    return;
  }

  // ドラッグ終了
  dragSwipeCarouselDragging = false;

  // 左へ十分ドラッグした場合
  if(dragSwipeCarouselMoveX < -dragSwipeCarouselThreshold){

    dragSwipeCarouselShow(dragSwipeCarouselCurrent + 1);

  // 右へ十分ドラッグした場合
  }else if(dragSwipeCarouselMoveX > dragSwipeCarouselThreshold){

    dragSwipeCarouselShow(dragSwipeCarouselCurrent - 1);

  // ドラッグ量が足りない場合は元へ戻す
  }else{

    dragSwipeCarouselShow(dragSwipeCarouselCurrent);

  }

});

// ドラッグがキャンセルされた場合
dragSwipeCarouselTrack.addEventListener("pointercancel", function(){

  // ドラッグ終了
  dragSwipeCarouselDragging = false;

  // 元の位置へ戻す
  dragSwipeCarouselShow(dragSwipeCarouselCurrent);

});

// 前へボタン
dragSwipeCarouselPrev.addEventListener("click", function(){

  // 前のスライドを表示
  dragSwipeCarouselShow(dragSwipeCarouselCurrent - 1);

});

// 次へボタン
dragSwipeCarouselNext.addEventListener("click", function(){

  // 次のスライドを表示
  dragSwipeCarouselShow(dragSwipeCarouselCurrent + 1);

});

// ドットクリック
dragSwipeCarouselDots.forEach(function(dot){

  dot.addEventListener("click", function(){

    // 指定したスライドを表示
    dragSwipeCarouselShow(Number(this.dataset.index));

  });

});

// 初期表示
dragSwipeCarouselShow(0);

ファイル構成と設置方法

このサンプルは、HTML・CSS・JavaScriptを分けた構成です。HTMLでカルーセルのレイアウトを作成し、CSSでデザインやアニメーションを設定しています。JavaScriptではマウスドラッグ・スワイプ・矢印ボタン・ドットナビによるスライド切り替え処理を行います。PCではマウスドラッグ、スマートフォンやタブレットではスワイプ操作で利用できます。

sample
├── index.html
├── style.css
└── script.js

sample/index.html をブラウザで開くと動作を確認できます。スライドの内容は index.html で変更できます。カルーセルの高さは style.css の .drag-swipe-carousel_slide の min-height: 420px; を変更すると調整できます。スライド速度は style.css の transition: transform .4s ease; を変更します。.4s = 0.4秒で、数値を大きくするとゆっくり、小さくすると速く切り替わります。ドラッグ・スワイプでページを切り替える距離は script.js の const dragSwipeCarouselThreshold = 80; を変更します。80 = 約80pxで、数値を大きくすると長くドラッグしないと切り替わらず、小さくすると短いドラッグでも切り替わるようになります。