ReactでスライダーライブラリのSwiperを使う

jQueryを使っていた時によく使っていたスライダーのライブラリ「Swiper」をReactで使ってみました。

swiperjs.com

先日作った写真のポートフォリオサイトのモーダルで、画像をスライドさせるために使っています。

photo.mismith.me

Reactで使う

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

swiperjs.com

npm i swiper

or

yarn add swiper

Swiperを使いたいところで以下のように書きます。 swiper.scss のimportは環境によりますが、Next.jsだとapp.jsx or app.tsxで読み込むようにエラーがでるかもしれません。その時は_appでimportしましょう。また、scssを導入していなければ、 import 'swiper/swiper.min.css' でOKです。

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

import 'swiper/swiper.scss';

export default () => {
  return (
    <Swiper>
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
    </Swiper>
  );
};

オプション

オプションはAPIページに書いてあります。全て試してないですが。

swiperjs.com

冒頭で紹介した写真サイトでは以下のようにしてみました。

import { Swiper, SwiperSlide } from 'swiper/react'
import SwiperCore, { Navigation } from 'swiper'
SwiperCore.use([Navigation])

// 省略

<Swiper
  spaceBetween={50}
  slidesPerView={1}
  initialSlide={initialSlide}
  loop={true}
  navigation={{
    prevEl: '.button_prev',
    nextEl: '.button_next',
  }}
>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
  <SwiperSlide>Slide 4</SwiperSlide>
</Swiper>

オプション
spaceBetween	スライド間のマージン指定
slidesPerView	スライドコンテナで見せるスライドの枚数
initialSlide	最初のスライド番号
loop	ループさせるかどうか
navigation	左右ナビゲーションの設定

initialSlideはモーダルを開いた時にどの画像を表示させるかを設定するために書いてます。画像をクリックするとその画像のindexをinitialSlideに渡すようにしています。

navigationはobjectかbooleanで指定できます。 nativagtion={true} を指定し、追加で import 'swiper/components/navigation/navigation.scss' or import 'swiper/components/navigation/navigation.min.css' をimportすると、Swiperで用意されている左右の矢印が表示されます。上記のようにオブジェクトでclass名を指定すると、cssでカスタマイズできます。

Paginationも同じようにできるはずです。

さいごに

お世話になってたSwiper、Reactでも便利に使えました。スマホでのフリック操作を実装してくれてるところがありがたいです。面倒なところはこういったライブラリを使うのがいいですね。