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

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

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

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

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

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

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

目次

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

画像クリックでDEMOページに移動

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

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

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

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のコード解説を行います。

手順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.cssscript.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の値を指定しています。

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

大枠を画面いっぱいに広げることができたので、次は中のスライド要素に以下の記述をします。

/* スライド */
.vertical-slider__slide {
  height: 100%;
  width: 100%;
}

こうすることで、各スライドが親要素の100%、つまり画面いっぱいに広がるようになりました。

これ以外は背景色や文字など、見た目に関する指定なので、自由にカスタマイズしてください。

手順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つに大きく分かれます。

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

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

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"なので横方向にスライドするよう設定されていますが、向きを変えることで縦スライダーを実装することができます。

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

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

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

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

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

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

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

Web制作に関する
記事案を募集中!

Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。
要望が多かったものは解説記事を作成します。

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

コメント

コメントする

目次
閉じる