【Swiper】全画面（縦横100%）で表示するスライダーの作り方

こんにちは、Ryohei（@ityryohei）です！

本記事では、Swiperで全画面（縦横100%）で表示するスライダーの作り方をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

Swiperとは

SwiperはjQuery不要でスライダーを実装することができるオープンソースのライブラリです。多機能でありながら設計がシンプルで、最近ではスライダーならSwiper一択だよね、というくらい支持を集めています。

公式サイト：https://swiperjs.com/

少し前までは他のスライダー（bxSliderやSlick）も選択肢の一つになっていましたが、最近制作されたサイトのスライダーは徐々にSwiperに置き換わってきている印象です。（あくまで体感です。）

今回実現したいこと

実現したいのは、ビューポートいっぱいに表示される、存在感のあるスライダーです。下記のデモのようなイメージになります。

See the Pen 4337 by ryohei (@intotheprogram) on CodePen.

全画面（縦横100%）のスライダーは、キービジュアルはもちろん、モーダルウィンドウ内やページ単位で表示するサイトを制作する際に役に立ちますので、おすすめです。

埋め込みだと小さく表示されてしまうのでこちらから全画面で見ていただいた方が良いかもです。

では、解説していきます。

Swiper本体を読み込む

冒頭で少しご紹介させていただきましたが「Swiper」はJavaScriptのスクリプトになります。そのため「Swiper」を使用する場合、別途本体のファイルを読み込む必要があります。ダウンロードする方は公式サイトへ、CDNで利用される場合は下記をスライダーを実装するファイルに読み込みましょう。

<!-- Swiper CSS -->
<link rel="stylesheet"href="https://unpkg.com/swiper/css/swiper.min.css">
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

以上で「Swiper」本体の読み込みは完了です。次はHTMLでスライダーの表示部分を作成していきます。

HTMLでスライダーを作成する

HTMLはデモと同じものを使用します。スクロールバーやページネーションを除外したものになります。（もし必要な場合は公式サイトのからスクロールバーやページネーションのコードを引っ張ってもらえればと思います。）

今回、画像を全画面で表示するためにCSSの「background-image」を使用します。HTML側から画像が変更できるように「style」属性に画像のURLを指定します。style属性で背景画像を指定することで動的な書き出しにも対応できるので、おすすめです。

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image: url(sample001.jpg)"></div>
        <div class="swiper-slide" style="background-image: url(sample002.jpg)"></div>
        <div class="swiper-slide" style="background-image: url(sample003.jpg)"></div>
    </div>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

以上でHTMLの作成は完了です。続いて作成したHTMLにスタイルを付けていきましょう。

スライダーが全画面で表示されるようにスタイルを定義する

本記事の内容で一番重要な部分です。ビューポートいっぱいに表示される縦横100%のスライダーを作成するためのスタイルを定義していきます。下記を参考にCSSを作成します。

• スライダーをビューポートの高さに合わせて表示する
• 背景に設定した画像をスライドいっぱいに表示する

実装方法はそれぞれ異なるかと思いますが、冒頭でご紹介したデモでは下記のスタイルを使用しています。

SCSS

.swiper-container {
    width: 100%;
    height: 100vh;
    
    .swiper-wrapper {
      
        .swiper-slide {
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }
    }
}

まったく同じになる必要はありませんので、参考程度に留めておいていただければと思います。

さて、ここまで長くなってしまいましたが、次が最後の工程です。スクリプトでスライダーが動くようにしてあげましょう！

スクリプトでスライダーを動かす

スクリプトといっても長々と書く必要はありません。記述するのは下記の通り数行です。

var mySwiper = new Swiper ('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
})

これだけでスライダーが動きます。オプションに指定しているのは「前へ・次へ」のボタンを有効にする設定です。他はデフォルトのまま使用していますが、それだけでスライダーとして動くので素晴らしいですね！

最後に

いかがでしたでしょうか。

「Swiper」は、本記事でご紹介した全画面（縦横100%）のスライダーはもちろん、様々なタイプのスライダーを容易に実装することができます。スライダーを使用する機会があればぜひ「Swiper」の触ってみて使い心地を確認してみてくださいね！

以上、Swiperで全画面（縦横100%）で表示するスライダーの作り方のご紹介でした！