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

縦スクロールスライダーを作る方法

縦スクロールスライダーを作る方法を紹介します。このサンプルでは、上下方向へ画像を切り替えられるスライダーをHTML、CSS、JavaScriptだけで実装します。左右へ切り替える一般的なスライダーとは異なり、縦方向へスライドするため、ニュース一覧や商品紹介、縦長コンテンツなどにも取り入れやすいレイアウトです。

サンプルでは「前へ」「次へ」ボタンをクリックすると、画像が上下へスライドしながら切り替わります。ライブラリを使用せずに実装しているため、必要なファイルを配置するだけで利用できます。表示する画像を変更するだけで、写真ギャラリーやバナー、イベント紹介など幅広い用途へ応用できます。

スライダーのサイズやアニメーション速度、画像の枚数などはコード内で変更できるため、Webサイトのデザインや用途に合わせてカスタマイズできます。縦方向へ切り替わるスライダーを手軽に導入したい方や、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-scroll-slider_demo">

    <!-- 画像表示エリア -->
    <div class="vertical-scroll-slider_box">

      <!-- 縦方向に動くスライド一覧 -->
      <div class="vertical-scroll-slider_track" id="vertical-scroll-slider-track">

        <!-- スライド1 -->
        <div class="vertical-scroll-slider_slide">
          <img src="images/【ここに1枚目の画像ファイル名】" alt="画像1">
        </div>

        <!-- スライド2 -->
        <div class="vertical-scroll-slider_slide">
          <img src="images/【ここに2枚目の画像ファイル名】" alt="画像2">
        </div>

        <!-- スライド3 -->
        <div class="vertical-scroll-slider_slide">
          <img src="images/【ここに3枚目の画像ファイル名】" alt="画像3">
        </div>

      </div>

    </div>

    <!-- 操作ボタン -->
    <div class="vertical-scroll-slider_buttons">
      <button class="vertical-scroll-slider_button" type="button" id="vertical-scroll-slider-prev">前へ</button>
      <button class="vertical-scroll-slider_button" type="button" id="vertical-scroll-slider-next">次へ</button>
    </div>

    <!-- 操作説明 -->
    <div class="vertical-scroll-slider_notice">
      「前へ」「次へ」ボタンで画像が上下へスライドします。
    </div>

  </div>

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

</body>
</html>

/* ページ全体 */
body{
  margin:0;  /* ページ外側の余白 */
  padding:40px 20px;  /* ページ内側の余白 */
  background:#f8fafc;  /* 背景色 */
  font-family:sans-serif;  /* フォント */
}

/* 縦スクロールスライダー全体 */
.vertical-scroll-slider_demo{
  max-width:760px;  /* 最大横幅 */
  margin:0 auto;  /* 中央寄せ */
}

/* 画像表示エリア */
.vertical-scroll-slider_box{
  height:420px;  /* 表示エリアの高さ */
  overflow:hidden;  /* はみ出した画像を隠す */
  border:1px solid #dbeafe;  /* 枠線 */
  border-radius:18px;  /* 角丸 */
  background:#ffffff;  /* 背景色 */
  box-shadow:0 10px 30px rgba(15,23,42,.08);  /* 影 */
}

/* 縦方向に動くスライド一覧 */
.vertical-scroll-slider_track{
  transition:transform .45s ease;  /* 切り替え速度：.45s = 0.45秒 */
}

/* スライド */
.vertical-scroll-slider_slide{
  height:420px;  /* 1枚分の高さ */
}

/* 画像 */
.vertical-scroll-slider_slide img{
  display:block;  /* 画像下の余白を消す */
  width:100%;  /* 横幅いっぱい */
  height:420px;  /* 画像の高さ */
  object-fit:cover;  /* 枠いっぱいに画像を表示 */
}

/* 操作ボタンエリア */
.vertical-scroll-slider_buttons{
  display:flex;  /* 横並び */
  justify-content:center;  /* 中央寄せ */
  gap:12px;  /* ボタン同士の間隔 */
  margin-top:20px;  /* 上余白 */
}

/* 操作ボタン */
.vertical-scroll-slider_button{
  padding:10px 20px;  /* ボタン内側の余白 */
  border:none;  /* 枠線なし */
  border-radius:999px;  /* 丸いボタン */
  background:#2563eb;  /* 背景色 */
  color:#ffffff;  /* 文字色 */
  font-weight:700;  /* 太字 */
  cursor:pointer;  /* クリックできることを示す */
}

/* 操作説明 */
.vertical-scroll-slider_notice{
  margin-top:16px;  /* 上余白 */
  text-align:center;  /* 中央寄せ */
  color:#2563eb;  /* 文字色 */
  font-weight:700;  /* 太字 */
}

// 縦方向に動くスライド一覧を取得
const verticalScrollSliderTrack=document.getElementById("vertical-scroll-slider-track");

// スライドをすべて取得
const verticalScrollSliderSlides=document.querySelectorAll(".vertical-scroll-slider_slide");

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

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

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

// 1枚分の高さ
const verticalScrollSliderHeight=420;

// 指定したスライドを表示
function verticalScrollSliderShow(index){

  // 最初より前なら最後へ移動
  if(index<0){
    verticalScrollSliderIndex=verticalScrollSliderSlides.length-1;

  // 最後より次なら最初へ移動
  }else if(index>=verticalScrollSliderSlides.length){
    verticalScrollSliderIndex=0;

  // 通常の移動
  }else{
    verticalScrollSliderIndex=index;
  }

  // 現在の番号に合わせて縦方向へ移動
  verticalScrollSliderTrack.style.transform=
    "translateY(-"+(verticalScrollSliderIndex*verticalScrollSliderHeight)+"px)";

}

// 前へボタンをクリックした時の処理
verticalScrollSliderPrev.addEventListener("click",function(){

  // ひとつ前のスライドへ移動
  verticalScrollSliderShow(verticalScrollSliderIndex-1);

});

// 次へボタンをクリックした時の処理
verticalScrollSliderNext.addEventListener("click",function(){

  // ひとつ次のスライドへ移動
  verticalScrollSliderShow(verticalScrollSliderIndex+1);

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルと、スライダーで使用する3枚の画像で構成されています。HTMLでは画像を縦方向に並べたスライダーと「前へ」「次へ」ボタンを作成し、CSSでは表示エリアの高さや画像サイズ、縦方向へ移動するときのアニメーションなどを設定します。JavaScriptでは現在表示している画像番号を管理し、ボタンをクリックすると画像一覧を上下へ移動させます。

sample/
├── index.html
├── style.css
├── script.js
└── images/
    ├── 【ここに1枚目の画像ファイル名】
    ├── 【ここに2枚目の画像ファイル名】
    └── 【ここに3枚目の画像ファイル名】

各ファイルの役割
index.htmlは縦スクロールスライダー全体を構成するファイルです。3枚の画像を縦方向に並べるスライド一覧と、「前へ」「次へ」ボタン、操作説明を配置します。画像のファイル名は、imagesフォルダへ配置した実際の画像ファイル名へ変更してください。

style.cssはスライダーのデザインと縦方向の動きを設定するファイルです。画像表示エリアと各スライドの高さを420pxに固定し、表示エリアからはみ出した画像を非表示にします。transitionを使用することで、画像を切り替えるときに滑らかに上下へスライドします。

script.jsはスライダーの切り替えを制御するファイルです。現在表示しているスライド番号を管理し、「前へ」「次へ」ボタンをクリックするとtranslateY()で画像一覧を上下へ移動します。最初の画像から「前へ」を押すと最後の画像へ移動し、最後の画像から「次へ」を押すと最初の画像へ戻ります。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、sample/images/へ使用する3枚の画像を保存します。index.htmlに記載されているimages/【ここに1枚目の画像ファイル名】などを、実際に配置した画像ファイル名へ変更してください。

ファイルを配置したあと、sample/index.htmlをブラウザで開きます。「次へ」ボタンをクリックすると次の画像が下から表示され、「前へ」ボタンをクリックすると前の画像が上から表示されます。3枚目の次は1枚目へ戻り、1枚目の前は3枚目へ移動します。

カスタマイズできる内容
index.htmlでは使用する画像、画像の枚数、alt属性、操作説明などを変更できます。画像を追加する場合は、vertical-scroll-slider_slideを使用したスライドを追加してください。

style.cssではスライダー全体の最大横幅、表示エリアの高さ、枠線、角丸、背景色、影、ボタンのサイズや色などを変更できます。また、transitionの時間を変更すると、画像が上下へ移動する速度を調整できます。

script.jsでは1枚分の移動距離を設定できます。表示エリアやスライドの高さを変更する場合は、CSSの高さとJavaScriptのverticalScrollSliderHeightを同じ値へ変更してください。

数値調整
style.css
padding:40px 20px;
ページ全体の内側余白です。40pxで上下、20pxで左右の余白を調整できます。

max-width:760px;
スライダー全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

height:420px;
画像表示エリア、各スライド、画像の高さです。値を大きくすると縦に高くなり、小さくすると低くなります。高さを変更する場合は、該当する3か所とJavaScriptのverticalScrollSliderHeightを同じ値へ変更してください。

border-radius:18px;
画像表示エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

transition:transform .45s ease;
画像が上下へ切り替わる時間です。.45sは0.45秒を表します。値を大きくするとゆっくり、小さくすると速く切り替わります。

gap:12px;
「前へ」「次へ」ボタン同士の間隔です。値を大きくするとボタンの間隔が広がります。

margin-top:20px;
画像表示エリアと操作ボタンの間隔です。値を大きくすると上下の間隔が広がります。

padding:10px 20px;
操作ボタンの内側余白です。10pxで上下、20pxで左右の大きさを調整できます。

script.js
const verticalScrollSliderHeight=420;
画像を1枚切り替えるときの縦方向の移動距離です。CSSで指定している画像表示エリアと各スライドの高さに合わせて変更してください。

レスポンシブ対応
このサンプルはスライダー全体にmax-width:760px;を指定し、画像にはwidth:100%を指定しているため、画面幅が760pxより狭くなると横幅に合わせて縮小されます。画像にはobject-fit:cover;を指定しているため、表示エリアの420pxの高さを維持しながら枠いっぱいに表示できます。