スライダーの実装（Swiper）

ロッチくん

スライダーを手軽に実装してみたいけどなんだか難しそうだニャン

メインビジュアルなどでよく見られる画像のスライダーや、フェードなどの動きを簡単に実装できるライブラリである「Swiper」の解説をしていきます！

Swiperとは
スライダーを作ってみる
ちょこっと解説

Swiperとは

Swiperとはスライダーが簡単に実装できるJavaScriptのライブラリーのことで、こちらはjQueryに依存していないのでこちらのライブラリ単体で使用が可能です。

まずCDNでライブラリを読み込みましょう。英語のサイトですが必要項目は以下の数行ですので以下ページからCDNのURLを入手してください！

Getting Started With Swiper

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>

CSSの読み込みはhead内に、JSの読み込みはbodyの閉じタグの前に記入してください。自作のJSの上に記入しましょう。

これで準備万端です！

スライダーを作ってみる

まず初めに基本的なスライダーを実装してみましょう。

ファーストビューを全画面表示で見せてスライダーするタイプです。デモページはこちら。

今回はページネーションと左右にある矢印のナビゲーションも表示させていますが消すことも可能ですし、少し手間ですがあとからCSSでデザインを変えることも可能です。

HTML

<div class="wrapper">
    <div class="main-visual">
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="slide-img fv-image01"></div>
                </div>
                <div class="swiper-slide">
                    <div class="slide-img fv-image02"></div>
                </div>
                <div class="swiper-slide">
                    <div class="slide-img fv-image03"></div>
                </div>
            </div>
            <!-- 左右のページナビを追加するときは以下を追加 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <!-- ページネーションを追加するときは以下を追加 -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <div class="container">
        <section></section>
        <section></section>
        <section></section>
    </div>
</div>

CSS

.wrapper {
  width: 100%;
}
.main-visual {
  width: 100%;
  height: 100vh;
}
.swiper {
  width: 100%;
  height: 100%;
}
.slide-img {
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}
.slide-img.fv-image01 {
  background-image: url(./images/fv-image01.jpg);
}
.slide-img.fv-image02 {
  background-image: url(./images/fv-image02.jpg);
}
.slide-img.fv-image03 {
  background-image: url(./images/fv-image03.jpg);
}
.container {
  max-width: 1000px;
  padding: 0 15px; 
  margin: 0 auto;
}
section {
  background-color: rgb(126 121 195);
  width: 100%;
  height: 500px;
  border-radius: 15px;
  margin: 50px 0;
}

JavaScript

const mySwiper = new Swiper(".swiper", {
    loop: true, //スライダを繰り返し表示
    speed: 1500, //1.5秒かけてスライド
    autoplay: { //自動再生する
        delay: 3000, //3秒ごとにスライダを切り替える
        disableOnInteraction: false, //スライドやナビに触っても自動再生を停止しない
    },
    navigation: { //左右のページナビを追加
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
    },
    pagination: { //ページネーションを追加
        el: ".swiper-pagination", 
    },
  });

ちょこっと解説

簡単な解説はコードの中にコメント化して記入してあります。今回のSwiperとは直接関係ありませんが、メインヴィジュアルを画面いっぱいで表示したかったので、画像は背景画像で指定してます。

JSの記載でautoplayのパラメータを「disableOnInteraction: false,」としているのはデフォルトではこの値がtrueとなっており、ユーザーがスライダーを操作したときに自動再生が止まります。その場合再度ページを読み込まないと自動再生しなくなるため今回は falseとし、ユーザーアクションの影響を受けない仕様にしています。

ただ最近の画面いっぱいで表示されたメインヴィジュアルではスライダーよりフェードによるもののほうが多い気もします。次回はフェードによる実装を解説したいと思います。

フェードでのスライダーを実装記事はこちらから