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

こんにちは、ryohei(@ityryohei)です!

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

Swiperで画面いっぱいにスライドを表示したいんだけど、どうすればいいんだろう?

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

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

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%)で表示するスライダーの作り方のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら