縦スクロールカルーセルを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

縦スクロールカルーセルを作る方法

縦スクロールカルーセルを作る方法を紹介します。上下方向へスライドを切り替えられるカルーセルで、お知らせ一覧やニュース、商品紹介、コンテンツ切り替えなどに利用できます。前へ・次へボタンで上下へ移動でき、アニメーション付きでスムーズに切り替わるため、通常の横スクロールとは違ったレイアウトを実現できます。HTML・CSS・JavaScriptだけで実装できるので、そのままコピーして利用できます。

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

サンプル画像は付属していません。ご自身で用意した画像へ変更してご利用ください。

デモ

スライド 01

上下方向へ切り替わる縦スクロールカルーセルです。

詳しく見る

スライド 02

ニュースやお知らせなどにも利用できます。

詳しく見る

スライド 03

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="vertical-carousel_demo">

    <!-- 表示エリア -->
    <div class="vertical-carousel_view">

      <!-- 縦方向に移動するスライド一覧 -->
      <div class="vertical-carousel_track" id="vertical-carousel-track">

        <!-- スライド1 -->
        <div class="vertical-carousel_slide vertical-carousel_slide1">

          <!-- スライド内の文章エリア -->
          <div class="vertical-carousel_content">

            <!-- タイトル -->
            <div class="vertical-carousel_title">スライド 01</div>

            <!-- 説明文 -->
            <p>上下方向へ切り替わる縦スクロールカルーセルです。</p>

            <!-- リンクボタン -->
            <a href="#" class="vertical-carousel_button">詳しく見る</a>

          </div>

        </div>

        <!-- スライド2 -->
        <div class="vertical-carousel_slide vertical-carousel_slide2">

          <!-- スライド内の文章エリア -->
          <div class="vertical-carousel_content">

            <!-- タイトル -->
            <div class="vertical-carousel_title">スライド 02</div>

            <!-- 説明文 -->
            <p>ニュースやお知らせなどにも利用できます。</p>

            <!-- リンクボタン -->
            <a href="#" class="vertical-carousel_button">詳しく見る</a>

          </div>

        </div>

        <!-- スライド3 -->
        <div class="vertical-carousel_slide vertical-carousel_slide3">

          <!-- スライド内の文章エリア -->
          <div class="vertical-carousel_content">

            <!-- タイトル -->
            <div class="vertical-carousel_title">スライド 03</div>

            <!-- 説明文 -->
            <p>HTML・CSS・JavaScriptだけで実装できます。</p>

            <!-- リンクボタン -->
            <a href="#" class="vertical-carousel_button">詳しく見る</a>

          </div>

        </div>

      </div>

      <!-- 上へ移動するボタン -->
      <button class="vertical-carousel_arrow vertical-carousel_prev" type="button" id="vertical-carousel-prev" aria-label="前へ"></button>

      <!-- 下へ移動するボタン -->
      <button class="vertical-carousel_arrow vertical-carousel_next" type="button" id="vertical-carousel-next" aria-label="次へ"></button>

      <!-- ドットナビ -->
      <div class="vertical-carousel_dots">

        <!-- スライド1へ移動 -->
        <button class="vertical-carousel_dot is-active" type="button" data-index="0" aria-label="スライド1"></button>

        <!-- スライド2へ移動 -->
        <button class="vertical-carousel_dot" type="button" data-index="1" aria-label="スライド2"></button>

        <!-- スライド3へ移動 -->
        <button class="vertical-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;  /* ページ背景色 */
}

/* 縦スクロールカルーセル全体 */
.vertical-carousel_demo{
  max-width:900px;  /* 最大横幅 */
  margin:40px auto;  /* 上下余白と中央寄せ */
}

/* 表示エリア */
.vertical-carousel_view{
  position:relative;  /* ボタンとドット配置の基準 */
  height:520px;  /* 表示高さ：script.js の 520 と同じ値にする */
  overflow:hidden;  /* はみ出したスライドを隠す */
  border-radius:24px;  /* 角丸 */
  background:#e0f2fe;  /* 背景色 */
}

/* 縦方向に移動するスライド一覧 */
.vertical-carousel_track{
  transition:transform .45s ease;  /* スライド速度：.45sを大きくすると遅く、小さくすると速くなる */
}

/* スライド共通 */
.vertical-carousel_slide{
  height:520px;  /* 1枚の高さ：script.js の 520 と同じ値にする */
  display:flex;  /* 中央配置 */
  align-items:center;  /* 縦中央 */
  justify-content:center;  /* 横中央 */
  background-size:cover;  /* 背景画像を全面表示 */
  background-position:center;  /* 背景画像の中央を表示 */
  position:relative;  /* 暗い背景レイヤーの基準 */
}

/* 背景画像を暗くするレイヤー */
.vertical-carousel_slide::before{
  content:"";  /* レイヤー用 */
  position:absolute;  /* スライド全面に配置 */
  inset:0;  /* 上下左右いっぱい */
  background:rgba(15,23,42,.45);  /* 暗さ：数値を大きくすると暗くなる */
}

/* スライド1の背景画像 */
.vertical-carousel_slide1{
  background-image:url("images/【配置した画像のファイル名1】");  /* imagesフォルダ内の画像名に変更 */
}

/* スライド2の背景画像 */
.vertical-carousel_slide2{
  background-image:url("images/【配置した画像のファイル名2】");  /* imagesフォルダ内の画像名に変更 */
}

/* スライド3の背景画像 */
.vertical-carousel_slide3{
  background-image:url("images/【配置した画像のファイル名3】");  /* imagesフォルダ内の画像名に変更 */
}

/* 文字エリア */
.vertical-carousel_content{
  position:relative;  /* 暗い背景レイヤーより前面 */
  z-index:2;  /* 前面に表示 */
  text-align:center;  /* 中央揃え */
  color:#ffffff;  /* 文字色 */
  max-width:600px;  /* 文章横幅 */
  padding:20px;  /* 内側余白 */
}

/* タイトル */
.vertical-carousel_title{
  margin:0 0 18px;  /* 下余白 */
  font-size:42px;  /* タイトル文字サイズ */
  font-weight:700;  /* 文字の太さ */
}

/* 説明文 */
.vertical-carousel_content p{
  margin:0 0 24px;  /* 下余白 */
  line-height:1.8;  /* 行間 */
}

/* リンクボタン */
.vertical-carousel_button{
  display:inline-flex;  /* ボタン型 */
  justify-content:center;  /* 横中央 */
  align-items:center;  /* 縦中央 */
  width:180px;  /* ボタン横幅 */
  height:50px;  /* ボタン高さ */
  border-radius:999px;  /* 丸いボタン */
  background:#ffffff;  /* 背景色 */
  color:#2563eb;  /* 文字色 */
  text-decoration:none;  /* 下線を消す */
  font-weight:700;  /* 文字の太さ */
}

/* 上下矢印ボタン */
.vertical-carousel_arrow{
  position:absolute;  /* 表示エリア上に配置 */
  left:50%;  /* 横中央 */
  width:52px;  /* ボタン横幅 */
  height:52px;  /* ボタン高さ */
  padding:0;  /* 内側余白なし */
  border:none;  /* 枠線なし */
  border-radius:50%;  /* 円形 */
  background:#ffffff;  /* 背景色 */
  cursor:pointer;  /* カーソル */
  transform:translateX(-50%);  /* 横位置補正 */
  box-shadow:0 12px 24px rgba(15,23,42,.18);  /* 影 */
  font-size:0;  /* ボタン内テキストを非表示 */
}

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

/* 上へボタン */
.vertical-carousel_prev{
  top:20px;  /* 上からの位置 */
}

/* 上矢印 */
.vertical-carousel_prev::before{
  transform:translate(-50%,-35%) rotate(-45deg);  /* 上向き矢印 */
}

/* 下へボタン */
.vertical-carousel_next{
  bottom:20px;  /* 下からの位置 */
}

/* 下矢印 */
.vertical-carousel_next::before{
  transform:translate(-50%,-65%) rotate(135deg);  /* 下向き矢印 */
}

/* ドットナビ */
.vertical-carousel_dots{
  position:absolute;  /* 表示エリア内に配置 */
  right:20px;  /* 右位置 */
  top:50%;  /* 縦中央 */
  transform:translateY(-50%);  /* 縦位置補正 */
  display:flex;  /* 縦並び用 */
  flex-direction:column;  /* 縦方向 */
  gap:12px;  /* ドット間隔 */
}

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

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

/* タブレット表示 */
@media(max-width:768px){

  .vertical-carousel_view{
    height:420px;  /* タブレット時の表示高さ：script.js 側も合わせる必要あり */
  }

  .vertical-carousel_slide{
    height:420px;  /* タブレット時の1枚の高さ */
  }

  .vertical-carousel_title{
    font-size:30px;  /* タブレット時のタイトルサイズ */
  }

}

// スライドをまとめて取得
const verticalCarouselTrack = document.getElementById("vertical-carousel-track");

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

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

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

// スライドを取得
const verticalCarouselSlides = document.querySelectorAll(".vertical-carousel_slide");

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

// スライド総数
const verticalCarouselTotal = verticalCarouselSlides.length;

// スライド高さ
// CSSの .vertical-carousel_slide と同じ高さにする
const verticalCarouselHeight = 520;

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

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

    verticalCarouselCurrent = verticalCarouselTotal - 1;

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

    verticalCarouselCurrent = 0;

  // 通常移動
  }else{

    verticalCarouselCurrent = index;

  }

  // 縦方向へスライド移動
  verticalCarouselTrack.style.transform =
    "translateY(-" + (verticalCarouselCurrent * verticalCarouselHeight) + "px)";

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

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

  });

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

}

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

  // 前のスライドを表示
  verticalCarouselShow(verticalCarouselCurrent - 1);

});

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

  // 次のスライドを表示
  verticalCarouselShow(verticalCarouselCurrent + 1);

});

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

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

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

  });

});

// 初期表示
verticalCarouselShow(0);

ファイル構成と設置方法

このサンプルは、HTML・CSS・JavaScriptを分けた構成です。HTMLで縦スクロールカルーセルのレイアウトを作成し、CSSで背景画像やレイアウト、アニメーションを設定しています。JavaScriptでは上下ボタンとドットナビによるスライド切り替え処理を行います。背景画像は sample/images/ フォルダへ配置して利用してください。

sample
├── index.html
├── style.css
├── script.js
└── images
    ├── image1.jpg
    ├── image2.jpg
    └── image3.jpg

sample/index.html をブラウザで開くと縦スクロールカルーセルを確認できます。使用する画像は sample/images/ フォルダへ配置し、HTMLまたはCSSで指定している画像ファイル名へ変更してください。画像の高さや表示エリアの高さは style.css の .vertical-carousel_view と .vertical-carousel_slide の height: 520px を変更すると調整できます。スライド速度は style.css の transition: transform .45s ease; を変更すると調整でき、.45s = 0.45秒です。数値を大きくするとゆっくり、小さくすると速く切り替わります。また、スライド移動量は script.js の const verticalCarouselHeight = 520; と同じ値にしてください。CSSとJavaScriptの数値を一致させることで、正しい位置へスライドします。