T.W

サムネイル

SwiperをReactで使う方法

※ビルドツールにViteを使っています。
※Swiperのバージョンは11.0.3を使用しています。( お使いのバージョンによってモジュールの読み込み先など若干違うことがあるため注意してください。)

https://swiperjs.com/react

インストール

$ npm install swiper

雛形を作ってみる

とりあえず雛形を作ってみます。

import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";

function App() {
  return (
    <>
      <Swiper>
        <SwiperSlide>
          <img src="./img/mainvisual1.jpg" alt="" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="./img/mainvisual2.jpg" alt="" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="./img/mainvisual3.jpg" alt="" />
        </SwiperSlide>
        <SwiperSlide>
          <img src="./img/mainvisual4.jpg" alt="" />
        </SwiperSlide>
      </Swiper>
    </>
  );
}

export default App;

簡単ですね。上記のように記述するとシンプルなスライダーができたと思います。でも今のままで使っていく場合はほぼないと思いますので次の章からナビゲーションやページネーションのつけ方や自動再生の設定の仕方などのオプションの設定方法についてみていきます。

オプション

オプションは基本的に<Swiper />に「props」で渡す形になります。
オプションにはそのまま使えるものや別途モジュールから読み込んできて使う2種類があることを覚えておいてください。

ナビゲーション

ナビーゲーションをつける方法をご紹介します。
これは、別途モジュールを読み込んで使うパターンのオプションです。

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation } from "swiper/modules"; // 追加
import "swiper/css";
import "swiper/css/navigation"; // 追加

function App() {
  return (
    <>
      <Swiper
        modules={[Navigation]}  {/* 追加 */}
        navigation {/* 追加 */}
      >
        ・・・
      </Swiper>
    </>
  );
}

export default App;

ページネーション

ページネーションのつけ方について解説します。
こちらも別途モジュールを読み込んで使う方法です。

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination } from "swiper/modules"; // 修正
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination"; // 追加

function App() {
  return (
    <>
      <Swiper
        modules={[Navigation,Pagination]} {/* 修正 */}
        navigation
        pagination={{
          clickable: true {/* 追加({{ clickable: true }} ← クリック操作を可能にする) */}
        }}
      >
        ・・・
      </Swiper>
    </>
  );
}

export default App;

自動再生

自動再生もよく使うオプションなのですが、これも別途モジュールを読み込んでします。
今回は2秒ごとに自動再生するように設定しています。

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination, Autoplay } from "swiper/modules"; // 修正
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

function App() {
  return (
    <>
      <Swiper
        modules={[Navigation,Pagination,Autoplay]} {/* 修正 */}
        navigation
        pagination={{ clickable: true }}
        autoplay={{
            delay: 2000　{/* 追加（{{ delay: 5000 }} ← デフォルト） */}
        }}
      >
        ・・・
      </Swiper>
    </>
  );
}

export default App;

このほかにもモジュールを読み込んで使っていくオプションはありますが数が膨大にあるため、個人的によく使うものを中心に書いてみました。その他のオプションに関してはご自分で調べてみてください。https://swiperjs.com/swiper-api#modules

ここからはモジュールの読み込みが必要なく使えるオプションで個人的によく使いそうなやつを紹介していきます。

ループ

スライドをループさせます。

return (
  <Swiper 
    loop={true}
  >
   ・・・
  </Swiper>
)

スピード

スライドスピードを変更したいときに使うオプションです。デフォルトの値は300

return (
  <Swiper 
    speed={500}
  >
   ・・・
  </Swiper>
)

画面に表示させる枚数の指定

return (
  <Swiper 
    slidesPerView={3}
  >
   ・・・
  </Swiper>
)

また、slidesPerViewには少数点数を指定でき、横にずれるスライドも実装できる。

return (
  <Swiper 
    slidesPerView={1.5}
    centeredSlides={true}
  >
   ・・・
  </Swiper>
)

また、slidesPerViewには「"auto"」も指定できCSSでサイズを調整したいときに使用します。

間隔を開ける

return (
  <Swiper 
    spaceBetween={50}
  >
   ・・・
  </Swiper>
)

CSSのmarginで間隔を開けるより、こちらが推奨されています。

ブレークポイント

デバイスの大きさによってslidesPerViewの値を変更したい時などに使います。

return (
  <Swiper 
     breakpoints={{
        {/* ウィンドウの幅が480px以上の場合 */}
        480: { slidesPerView: 2 },
        {/* ウィンドウの幅が1056px以上の場合 */}
        1056: { slidesPerView: 3 },
        ・・・
     }}
  >
   ・・・
  </Swiper>
)

以上が私が個人的によく使うオプションです。
何度も言うかもですがSwiperのオプションの数は膨大です。なので、今回はこの程度で止めておきたいと思います。もし、ほかにも気になる方はこちらをご覧ください。

まとめ

今回はReactでのSwiperの使い方についてのお話でしたが、Vueなどの各種フレームワーク用のコンポーネントも用意されています。
また機会があれば本ブログでもご紹介できればと思っています。
もちろんフレームワークではなくVanillaJSでも使えるので、是非スライダーを実装する際にはSwiperを使用してみてください。

https://watataku-blog.vercel.app/blog/9t4yqq-zq ← VanillaJSでの使い方を紹介した記事