Reactでスライダーを導入したい時とりあえずSwiperを使ってみよう

※この記事は以前ちょっと株式会社 社員ブログで公開していたものです

こんにちわ、フロントエンドエンジニアのしまむーです。
スライダーの実装ってWeb制作や開発をしているとよくありますよね、今回はそんなスライダーを実装する際のライブラリについての話です。
React周りのスライダーのライブラリはたくさんあるかと思いますが、多くのライブラリはカスタマイズに対応こそしている物の柔軟性にはやや疑問があるものが多いです。
そんな中でもSwiperは多様なhookが用意されており、ライブラリ側でモジュール化もされているためReactを使っているプロジェクトならばすぐに導入出来ます、今回はそんなSwiperの導入について簡単にお話したいと思います。

実際に使ってみる

Reactでの導入方法についてはドキュメントにも書かれています。基本的にはドキュメント通りやれば導入はできます。

npm i swiper

or

yarn add swiper

インストールが出来たら利用したいページで以下のように書きます。

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.scss';

これだけでSwiper側で用意されているReact component が利用できるようになります。
下記のようにcomponentを使いましょう。
下記の通りにすることでSwiperのデフォルトのスライダーを利用することができます。

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.scss';

export default () => {
  return (
      <SwiperSlide>
        <img src="https://placehold.jp/3d4070/ffffff/700x450.png?text=1" alt="1" />
      </SwiperSlide>
      <SwiperSlide>
        <img src="https://placehold.jp/3d4070/ffffff/700x450.png?text=2" alt="2" />
      </SwiperSlide>
      <SwiperSlide>
        <img src="https://placehold.jp/3d4070/ffffff/700x450.png?text=3" alt="3" />
      </SwiperSlide>
      <SwiperSlide>
        <img src="https://placehold.jp/3d4070/ffffff/700x450.png?text=4" alt="4" />
      </SwiperSlide>
  );
};

オプションを設定する

でも実際にスライダーを実装する場合などはそのままデフォルトのものをそのまま利用する場合といのはあまりないと思います。色々設定を変更したりカスタマイズして利用したいですよね？

Swiperの基本的なオプションは下記のように指定することで利用が可能です。

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.scss';

export default () => {
  return (
    <Swiper
      spaceBetween={50}
      slidesPerView={3}
    >
      ...
    </Swiper>
  );
};

主なオプションは下記のように設定できます。

spaceBetween
スライド間の余白を設定できます。
Type: number
Default: 0

slidesPerView
スライドの表示枚数の設定
Type: number
Default: auto

speed
Slideのトランジションのスピード
Type: number
Default: 300

centeredSlides
スライドをセンター寄せにする
Type: boolean
Default: false

上記の設定以外にも様々あるのですが、数が膨大なため今回はご紹介を控えます。
また上記のほかに利用にあたり、別途読み込みが必要な機能もあります。

例えば下記のような機能には別途モジュールの読み込みが必要です。

autoplay
自動スライド
Type: boolean | object
Default: {delay: 5000}

pagination
スライドの表示枚数の設定
Type: boolean | object
Default: false

下記のように追加のモジュールを読み込んで利用します。

import { Autoplay, Pagination } from 'swiper';

// 元々利用していたSwiper Core
import { Swiper, SwiperSlide } from 'swiper/react';

モジュールなどの詳しいオプションについては下記のドキュメントを確認してみてください。
https://swiperjs.com/swiper-api

hookを利用する

Reactには様々なhookが用意されています。下記のように利用できます。

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/swiper.scss';

export default () => {
  return (
    <Swiper
　　　　　　// スライドが切り替わるたび実行される。
　　　　　　onSlideChange={(swiper) => console.log('スライドが変更されました。')}
　　　　　　// スライドが表示された最初の1回に実行されます。
　　　　　　onSwiper={(swiper) => console.log('スライドが生成されました')}
    >
      ...
    </Swiper>
  );
};

上記のようにonSlideChangeやonSwiperのようなhookが用意されています。
イベントの数もこれまた膨大に用意されていますので、ドキュメントを参照してください。
https://swiperjs.com/swiper-api#events

Reactコンポーネントで利用する場合には下記のイベントのそれぞれの頭にonを付けることで利用可能です。つまりon{Eventname}のような形になります。

最後に

今回はReactでのSwiperの利用について紹介してみました。今回はReactでの利用方法でしたが、VueやAngularのコンポーネントも用意されていますし、Vanilla JSでももちろん利用できますのでスライダーの実装が必要な際には是非利用してみましょう。