ReactとSwiper.jsで簡単スライダー

Swiper.jsとは何か？

以下、公式サイトから引用しました。

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.

訳：Swiperはハードウェアの状態の移行や自然な振る舞いを加速させるフリーモバイルタッチスライダーです。モバイルウェブサイト、アプリ、ネイティブ/ハイブリッドアプリで使用されることを意図しています。全てのプラットフォームに互換性があるわけではなく、モダンなアプリやプラットフォームにベストでシンプルな経験を提供することに焦点をおいています
Copy

上記の通り、古いブラウザ、特にIEで使う必要がある場合(今後は減ってくると思いますが)は注意が必要です。現在のバージョンはv8.0ですが、バージョンv5.0以降はIEサポートしていないのでv4を使う必要があります。今回は以前ポートフォリオ用に作ったものを紹介するため、v6.8での挙動となります。

完成版は以下の通りです。今回はスライド時にフリップするようにしていますが、通常のスライダーのような挙動もできますし、サイコロを転がした時のような挙動も簡単に実現できます。分かりにくいですがページネーションも画像下に置いています。参考資料欄に公式のドキュメントのリンクを貼るので、詳細はそちらをご覧ください。デモも色々あるので、覗いてみるだけでも楽しいと思います！

ここからは実際の導入方法を紹介します。バージョンによって詳細は異なる可能性がありますが、おおむね同じ手順のはずです。

ステップ

Swiper.jsをインストールします。

npm install swiper
Copy

必要なスタイルとコアパッケージをインポートします。フリップやナビゲーションなども必要なものを適宜インポートします。余計なものをインポートしないため、重くならずに済みます。

import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/swiper-bundle.min.css";
import "swiper/swiper.scss";


import "swiper/components/navigation/navigation.scss";
import "swiper/components/pagination/pagination.scss";
import "swiper/components/effect-flip/effect-flip.scss";
import "swiper/components/scrollbar/scrollbar.scss";


import SwiperCore, { EffectFlip, Navigation, Pagination } from “swiper

使いたいファイルで使用します。基本的にはインポートしたファイルでそのまま使用する形になると思います。以下のようにSwiperコンポーネントでSwiper slideを囲むと、Swiper slide１つにつきスライドを１つ作れます。直感的で良いですね。Props渡しでスライドのスピードやエフェクト、ループするかどうかなど様々な設定ができます。お好みで設定してみてください。

            　　<Swiper
                  spaceBetween={0}
                  slidesPerView={1}
                  speed={500}
                  loop={true}
                  touchRatio={1.5}
                  navigation={true}
                  effect={"flip"}
                  pagination={{ clickable: true }}
                  className="mySwiper"
                >
                  <SwiperSlide>
                    <img
                      src={`${baseImgPath}${list.imgDetailPathA}`}
                      alt="Project"
                      className="slide-image"
                    />
                  </SwiperSlide>
                  <SwiperSlide>
                    <img
                      src={`${baseImgPath}${list.imgDetailPathB}`}
                      alt="Project"
                      className="slide-image"
                    />
                  </SwiperSlide>
                  <SwiperSlide>
                    <img
                      src={`${baseImgPath}${list.imgDetailPathC}`}
                      alt="Project"
                      className="slide-image"
                    />
                  </SwiperSlide>
              　</Swiper

基本的にはこれで完了なのですが、実装にあたってエラーが起こってそれを解消したので、そちらの解決策も紹介しておきます。

エラー1：styleのインポートがうまくできない。

公式だと以下のようにシンプルにscssフォルダからスタイルがインポートされていたのですが、自分のケースだとこれではうまくいきませんでした。

import 'swiper/scss';
import 'swiper/scss/navigation';
import 'swiper/scss/pagination';

以下のようにコンポーネントからインポートするようにすると、解消できました。

import "swiper/swiper-bundle.min.css";
import "swiper/swiper.scss";
import "swiper/components/navigation/navigation.scss";
import "swiper/components/pagination/pagination.scss";
import "swiper/components/effect-flip/effect-flip.scss";
import "swiper/components/scrollbar/scrollbar.scss";

エラー2：Propsがうまく渡せず正常に動作しない。

公式だと、以下のようにmodulesとしてNavigationなどの使いたいモジュールを渡していたのですが、そちらも正常に動作しませんでした。

    <Swiper
      modules={[Navigation, Pagination, Scrollbar, A11y]} // I want to focus here
      spaceBetween={50}
      slidesPerView={3}
      navigation
      pagination={{ clickable: true }}
      scrollbar={{ draggable: true }}
      onSwiper={(swiper) => console.log(swiper)}
      onSlideChange={() => console.log('slide change')}
    >

Swiperの中でmodulesとして使いたいモジュールを渡すのではなく、以下のようにuseメソッドを使い、Swiperコンポーネントの外でモジュールの使用を宣言することでエラーを解消できました。

SwiperCore.use([EffectFlip, Navigation, Pagination]);

まとめ

Swiper.jsは簡単に使える、軽量なスライダーライブラリです。自身で細かくcssを設定する必要もなく、かつjQueryに頼らなくても様々なスライダーアクションを実装できるので使い所は多いと思っています。この記事が参考になれば幸いです。

参考資料

Swiper official site: https://swiperjs.com/

ここまでお読みいただきありがとうございました！

エンジニア

きょう

# フロントコーディング

一覧に戻る