【Swiper】縦スライド可能な全画面ページを実装する方法

2021年4月9日2021年4月23日

縦スクロールで画面いっぱいのスライドを切り替える縦長ページを作成する機会があったので、実装方法を紹介しようと思います。

有名なプラグインだとfullPage.jsがありますが、

jQueryに依存している
最新版はライセンスが必要

などの問題があり使いにくいです…。

なので今回は、簡単にスライダーを作成できるJavaScriptライブラリ「Swiper」を使って縦スライド可能な全画面ページを作ってみました。

DEMOページと実装コードも紹介しているので、是非参考にしてみてください。

縦スライド可能な全画面ページの実装DEMO

まずは実際のページのDEMOを確認してみてください。

DEMOページの仕様は、以下の通りです。

スライドのサイズ：縦・横画面いっぱい
スライド移動方法：
- 画面をドラッグ or スクロール（マウスホイールも対応）
- ページネーションをクリック
- 画面をスワイプ（SPのみ）

DEMOと仕様が確認できたら、次で全体の実装コードをみていきましょう。

DEMO

【コピペ用】縦スライド可能な全画面ページの実装コード

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>Vertical Slider DEMO</title>
    <!-- CDN読み込み -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
    <!-- CSSファイル読み込み -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="swiper-container vertical-slider">
      <div class="swiper-wrapper vertical-slider__wrapper">
        <div class="swiper-slide vertical-slider__slide">SLIDE 1</div>
        <div class="swiper-slide vertical-slider__slide">SLIDE 2</div>
        <div class="swiper-slide vertical-slider__slide">SLIDE 3</div>
        <div class="swiper-slide vertical-slider__slide">SLIDE 4</div>
        <div class="swiper-slide vertical-slider__slide">SLIDE 5</div>
      </div>
      <div class="swiper-pagination vertical-slider__pagination"></div>
    </div>

    <!-- CDN読み込み -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <!-- JSファイル読み込み -->
    <script src="script.js"></script>
  </body>
</html>

/* Google Fonts読み込み */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap");

/* 簡易リセットCSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* スライダー全体 */
.vertical-slider {
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

/* スライド */
.vertical-slider__slide {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10rem;
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
  color: #fff;
}

/* 1枚目のスライド */
.vertical-slider__slide:nth-child(1) {
  background-color: #fa5457;
}

/* 2枚目のスライド */
.vertical-slider__slide:nth-child(2) {
  background-color: #fa8925;
}

/* 3枚目のスライド */
.vertical-slider__slide:nth-child(3) {
  background-color: #f6d51f;
}

/* 4枚目のスライド */
.vertical-slider__slide:nth-child(4) {
  background-color: #01b4bc;
}

/* 5枚目のスライド */
.vertical-slider__slide:nth-child(5) {
  background-color: #5fa55a;
}

/* SP時の文字サイズ調整 */
@media (max-width: 599px) {
  .vertical-slider__slide {
    font-size: 16vw;
  }
}

/* アドレスバー・ツールバーを除いた100vhの高さを取得 */
function setHeight() {
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty("--vh", `${vh}px`);
}
setHeight();
window.addEventListener("resize", setHeight);

/* スライダーの設定 */
const verticalSlider = new Swiper(".vertical-slider", {
  direction: "vertical",
  slidesPerView: 1,
  speed: 600,
  mousewheel: true,
  pagination: {
    el: ".vertical-slider__pagination",
    type: "bullets",
    clickable: true,
  },
});

これらをコピペすることで、DEMOページと同じ全画面の縦スライダーが実装可能です。

次の章でコードの解説をしていきますので、カスタマイズしたい・コードを理解したいという方はぜひ読んでみてください。

【解説】縦スライド可能な全画面ページの実装コードの解説

ここでは、Swiperの読み込みからHTML・CSS・JavaScriptのコード解説を行います。

Swiperを読み込む方法
HTMLの解説
CSSの解説
JavaScriptの解説

手順1. Swiperを読み込む

SwiperはJavaScriptライブラリなので、使用するにはまず読み込む必要があります。

ここでは一番手軽で簡単な、CDNを使用して読み込む方法を紹介します。

<!-- CSSのCDN -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<!-- JavaScriptのCDN -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

上記の2行をHTML内に記入してください。

記入箇所は、以下の通りです。

<head>
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  <script src="script.js"></script>
</body>

CSSは<head>タグ内、JavaScriptは</body>タグの直前で読み込むのが理想的ですね。

また、必ずCDNの後にstyle.cssやscript.jsを置くようにしてください。

これら以外にも読み込む方法はいくつかありますので、詳しくはSwiperの公式ページから確認してください。

手順2. HTMLでスライダーのタグとクラスを準備

ここでは、HTMLでスライダーを実装するためのタグを設置していきます。

まずは、Swiper公式が用意しているテンプレートを使用します。

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">SLIDE 1</div>
    <div class="swiper-slide">SLIDE 2</div>
    <div class="swiper-slide">SLIDE 3</div>
    <div class="swiper-slide">SLIDE 4</div>
    <div class="swiper-slide">SLIDE 5</div>
  </div>
  <div class="swiper-pagination"></div>
</div>

このまま使用してもいいのですが、CSSを上書きする用のオリジナルのクラスを設定します。

<div class="swiper-container vertical-slider">
  <div class="swiper-wrapper vertical-slider__wrapper">
    <div class="swiper-slide vertical-slider__slide">SLIDE 1</div>
    <div class="swiper-slide vertical-slider__slide">SLIDE 2</div>
    <div class="swiper-slide vertical-slider__slide">SLIDE 3</div>
    <div class="swiper-slide vertical-slider__slide">SLIDE 4</div>
    <div class="swiper-slide vertical-slider__slide">SLIDE 5</div>
  </div>
  <div class="swiper-pagination vertical-slider__pagination"></div>
</div>

ここでは、vertical-sliderというクラスを設定しました。

swiper-クラスでデフォルトのスタイルを継承し、vertical-sliderクラスで今回のスライダーに必要なスタイルを上書きしていきます。

※オリジナルクラスの設定は任意なので、swiper-クラスにそのまま上書きスタイルを指定してもOKです。

手順3. CSSでスライダーの見た目を装飾

ここでは、CSSでスライダーの見た目を装飾していきます。

/* Google Fonts読み込み */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap");

/* 簡易リセットCSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* スライダー全体 */
.vertical-slider {
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

/* スライド */
.vertical-slider__slide {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10rem;
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
  color: #fff;
}

/* 1枚目のスライド */
.vertical-slider__slide:nth-child(1) {
  background-color: #fa5457;
}

/* 2枚目のスライド */
.vertical-slider__slide:nth-child(2) {
  background-color: #fa8925;
}

/* 3枚目のスライド */
.vertical-slider__slide:nth-child(3) {
  background-color: #f6d51f;
}

/* 4枚目のスライド */
.vertical-slider__slide:nth-child(4) {
  background-color: #01b4bc;
}

/* 5枚目のスライド */
.vertical-slider__slide:nth-child(5) {
  background-color: #5fa55a;
}

/* SP時の文字サイズ調整 */
@media (max-width: 599px) {
  .vertical-slider__slide {
    font-size: 16vw;
  }
}

以上がCSSの全体コードです。

ここでは、機能に関わる重要なスタイルのみ解説していきますね。

/* スライダー全体 */
.vertical-slider {
  width: 100%; /* 横幅を画面いっぱいに広げる */
  height: 100vh; /* 縦幅を画面いっぱいに広げる */
  height: calc(var(--vh, 1vh) * 100); /* 縦幅を画面いっぱいに広げる（アドレスバー・ツールバーの高さを除く） */
}

まずはスライダー全体を囲うvertical-sliderクラスに、横幅・縦幅を画面いっぱいに広げるように指定します。

横幅を画面いっぱいに広げるには、width: 100%とするだけでOKですね。

縦幅に関してはheight: 100vhと指定すると、スマホで見た場合に正しい値が設定されません。

そのため、CSS変数とJavaSCriptを併用して、スマホのアドレスバー・ツールバーの高さを除いた100vhの値を指定しています。

これに関しては以下の記事で解説していますので、興味があれば読んでみてください。

手順4. JavaScriptでスライダーの機能を設定

最後に、JavaScriptの実装コードを解説していきます。

/* 1. アドレスバー・ツールバーを除いた100vhの高さを取得 */
function setHeight() {
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty("--vh", `${vh}px`);
}
setHeight();
window.addEventListener("resize", setHeight);

/* 2. スライダーの設定 */
const verticalSlider = new Swiper(".vertical-slider", {
  direction: "vertical", // スライダーの向きを縦にする
  slidesPerView: 1, // 一度に1枚のスライドを表示
  speed: 600, // 600msでスライドを切り替える
  mousewheel: true, // マウスホイールやスクロールを有効にする
  pagination: {
    el: ".vertical-slider__pagination", // ページネーション要素のクラスを指定
    type: "bullets", // ページネーションの形を指定
    clickable: true, // ページネーションをクリック可能にする
  },
});

JavaScriptで実装する内容は、以下の2つに大きく分かれます。

スマホのバーを除いた100vhの高さを取得
スライダーの設定

それぞれ解説していきますね。

JavaScript 1. スマホのバーを除いた100vhの高さを取得

CSSのパートで説明しましたが、height: 100vhと指定すると、スマホで見たときにアドレスバー・ツールバーの高さ分はみ出してしまいます。

そのため、バーを除いた100vhの高さをJavaScriptとCSSで設定する必要があります。

function setHeight() {
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty("--vh", `${vh}px`);
}
setHeight();
window.addEventListener("resize", setHeight);

このJavaScriptのコードを簡単に説明すると、

アドレスバー・ツールバーを除いた画面縦幅の1%の値を取得して、CSS変数--vhに値を格納する関数を定義
ページロード時&画面リサイズ時に関数を呼び出す

ということが起こっています。

ここでは詳しい説明はしませんので、気になる方は以下の記事をお読みください。

JavaScript 2. スライダーの設定

ここでは、実際のスライダーの設定をしていきます。

Swiperでは多くのオプションが用意されているので、以下のように指定します。

const verticalSlider = new Swiper(".vertical-slider", {
  direction: "vertical", // スライダーの向きを縦にする
  slidesPerView: 1, // 一度に1枚のスライドを表示
  speed: 600, // 600msでスライドを切り替える
  mousewheel: true, // マウスホイールやスクロールを有効にする
  pagination: {
    el: ".vertical-slider__pagination", // ページネーション要素のクラスを指定
    type: "bullets", // ページネーションの形を指定
    clickable: true, // ページネーションをクリック可能にする
  },
});

ここでのポイントは、directionに"vertical"を指定することですね。

デフォルト値は"horizontal"なので横方向にスライドするよう設定されていますが、向きを変えることで縦スライダーを実装することができます。

また、mousewheelをtrueにすることで、マウスホイールやトラックパッド等のスクロールにも反応するようになります。

ここでは最低限のオプションのみにしていますが、もっとカスタマイズしたい方はSwiper公式のAPIをチェックしてみてください。

これでJavaScriptの解説は終わりです！

【まとめ】Swiperで縦スライド可能な全画面ページを実装可能！

スライダーを実装できるJavaScriptライブラリ「Swiper」を使って、全画面の縦スライダーを実装する方法を紹介しました。

Swiperはよく横スライダーの実装に使われますが、少し工夫することで縦スライド可能の全画面ページを作ることができます。

フルスクリーンの縦スライドページを実装する機会があれば、是非この方法を使ってみてください！

DEMO

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

【Swiper】縦スライド可能な全画面ページを実装する方法

縦スライド可能な全画面ページの実装DEMO

【コピペ用】縦スライド可能な全画面ページの実装コード

【解説】縦スライド可能な全画面ページの実装コードの解説

手順1. Swiperを読み込む

手順2. HTMLでスライダーのタグとクラスを準備

手順3. CSSでスライダーの見た目を装飾

手順4. JavaScriptでスライダーの機能を設定

JavaScript 1. スマホのバーを除いた100vhの高さを取得

JavaScript 2. スライダーの設定

【まとめ】Swiperで縦スライド可能な全画面ページを実装可能！

コメント

コメントするコメントをキャンセル

Next.jsとMDXで技術ブログ「WebTech Note」を新設しました

パートナーとして一緒に仕事してくださるデザイナー様を募集中です

GatsbyJSでポートフォリオサイトをリニューアルしました。

【Swiper】縦スライド可能な全画面ページを実装する方法

縦スライド可能な全画面ページの実装DEMO

【コピペ用】縦スライド可能な全画面ページの実装コード

【解説】縦スライド可能な全画面ページの実装コードの解説

手順1. Swiperを読み込む

手順2. HTMLでスライダーのタグとクラスを準備

手順3. CSSでスライダーの見た目を装飾

手順4. JavaScriptでスライダーの機能を設定

JavaScript 1. スマホのバーを除いた100vhの高さを取得

JavaScript 2. スライダーの設定

【まとめ】Swiperで縦スライド可能な全画面ページを実装可能！

コメント

コメントする コメントをキャンセル

Next.jsとMDXで技術ブログ「WebTech Note」を新設しました

パートナーとして一緒に仕事してくださるデザイナー様を募集中です

GatsbyJSでポートフォリオサイトをリニューアルしました。

コメントするコメントをキャンセル