KumaTechLab
2021-10-20/2023-05-23

Swiperの使い方(9.2)

Swiperの使い方(9.2)

スライダーのライブラリというとSlickを思い浮かべる人が多いのではないかと思います。

実際使い心地も悪くなく、お手軽にスライダーを設置することが可能です。

それなのになぜ「Swiper」を使用するかというと、SlickはjQueryが必要で、SwiperはjQueryが必要ないからです。

jQueryを読み込むとどうしても読み込みに時間がかかってしまいます。そのため「PageSpeed Insights」などの項目を見ればスクリプト系の項目で必要ないなら削除してくださいなど指摘されやすいです。

今回はそんなjQuery不要でお手軽にスライダーを設置できる「Swiper」の使い方を紹介します。

6系の記事が多かったですが、最新の9系で紹介します。

Swiperとは

そもそもSwiperとは何なのかというところですね。

「MIT LICENSE」でgithubで公開されているオープンソースのスライダーライブラリです。アドオンとかもなくすべてが無料で利用できるようになっています。

また、「React」「Vue」「Angular」「Svelte」などのJSフレームワークにも対応していています。

今回は普通のJSとReactの２種類で紹介します。

Swiperの使い方

npmでインストールすることもできますし、CDNの利用にも対応しています。

開発環境に応じて選びましょう。

npm install swiper
<link
  rel="stylesheet"
  href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

早速作成していくのですが、仕様を決定しておこうと思います。

  • ナビゲーションあり(矢印)
  • ページネーションあり(ドット)
  • 自動再生ループ
  • 表示数：SP(~599) 2　TAB(600~839) 3　PC(840~) 4

こんな感じで作成してみましょう。

HTML側のマークアップ

<div class="swiper">
  <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>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

JS(node 使用時)

import Swiper, { Navigation, Pagination, Autoplay } from "swiper";
import 'swiper/scss';
import 'swiper/scss/navigation';
import 'swiper/scss/pagination';
import 'swiper/scss/autoplay';
const swiper = new Swiper( '.swiper', {
    modules: [ Navigation, Pagination, Autoplay ],
        loop: true,
        pagination: {
            clickable: true,
            el: '.swiper-pagination',
            type: 'bullets',
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        autoplay: {
            delay: 4000
        },
        speed: 1500,
        slidesPerView: 2,
        spaceBetween: 8,
        slidesPerGroup: 2,
        breakpoints: {
            600: {
                slidesPerView: 3,
                spaceBetween: 16,
                slidesPerGroup: 3,
            },
            840: {
                slidesPerView: 4,
                spaceBetween: 24,
                slidesPerGroup: 4,
            }
        }
} );

importでは「Navigation, Pagination, Autoplay」を読み込む点に注意。

スタイルは作成した時の都合上「SCSS」を指定していますが、「CSS」も選べます。また、「bundle」ですべてのモジュール対応のcssファイルを読み込むことも可能です。

swiperのオプションでは「modules: [ Navigation, Pagination, Autoplay ]」ここを忘れずに記述するようにしないと動かないので注意。

breakpointsを設定する場合はデフォを一番小さいサイズに設定し、指定幅で大きくしていくと良いと思います。

埋め込みで動くように少し変更し、このサイトの記事にスライドを変更すると以下のような感じになります。

デベロッパーツールで幅を変更するとちゃんとスライド枚数も変更されます。

過去バージョンから9.xに変更する時

ループを利用する際は「slidesPerView」の2倍の量が最低でも必要になります。また、全体数を「slidesPerView」で割ってあまりが出る場合、逆順のナビゲーション時に挙動がおかしくなります。

挙動がおかしくなった場合無理に最新バージョンに挙げるのではなく、8.xあたりを使用すると良いです。

Swiperの使い方(React)

Reactもさらっと紹介しておきます。

import { Navigation, Pagination, Autoplay } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/scss';
import 'swiper/scss/navigation';
import 'swiper/scss/pagination';
import 'swiper/scss/autoplay';
export default () => {
  return (
    <Swiper
      modules={ [Navigation, Pagination, Autoplay] }
      spaceBetween={ 2 }
      slidesPerView={ 8 }
      slidesPerGroup={ 2 }
      loop={ true }
      speed={ 1500 }
      navigation
      pagination={ { clickable: true } }
      autoplay={ { delay: 4000 } }
      breakpoints={ {
          600: {
              slidesPerView: 3,
              spaceBetween: 16,
              slidesPerGroup: 3,
          },
          840: {
              slidesPerView: 4,
              spaceBetween: 24,
              slidesPerGroup: 4,
          }
      } }
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
    </Swiper>
  );
};

こちらも同様にモジュールを読み込まないといけない点に注意。

普通の記述の仕方とほとんど変わらないです。

APIを見て作成していくと、Reactは対応されていないものがあったりするので気をつける必要があります。(通常使うようなものは問題なく整備されています。)

まとめ

とても使いやすいライブラリです。そして何よりドキュメントが読みやすいです。英語苦手な方でもわかるような簡単な記述をしてくれています。

なので、今回はオプションに使い方は省かせてもらいました。詳しくはこちらで調べてください。Swiper API

スライダーを使用する上で気にしなければいけない点として、「描画時の動き」が挙げられます。「PageSpeed Insights」の「CLS」に引っかかりやすくなってしまいます。

各々のスライダーを「padding-top」などで固定しておく、全体で「aspect-ratio」「max-height」を使用するなどして、工夫してください。

2020 KumaTechLab.