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

スライダー

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

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

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

スライダーのサイズやアニメーション速度、画像の枚数などはコード内で変更できるため、Webサイトのデザインや用途に合わせてカスタマイズできます。縦方向へ切り替わるスライダーを手軽に導入したい方や、JavaScriptを使った基本的なスライダーの作り方を学びたい方にもおすすめです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

画像1
画像2
画像3

「前へ」「次へ」ボタンで画像が上下へスライドします。

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

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

ファイル構成と設置方法

このサンプルは、HTML・CSS・JavaScriptを分けたシンプルな構成です。表示する画像は images フォルダへ配置し、index.html に記載されている画像ファイル名を書き換えるだけで利用できます。JavaScriptは縦方向のスライド切り替え処理を担当しています。 

sample/
├── index.html
├── style.css
├── script.js
└── images/
    ├── （1枚目の画像）
    ├── （2枚目の画像）
    └── （3枚目の画像）

sample フォルダ内へ各ファイルを配置し、使用する画像を sample/images/ フォルダへ保存してください。次に、index.html の images/【ここに○枚目の画像ファイル名】 を実際の画像

コメント