【React】でSwiperを使う方法

2023年10月18日React

ReactでSwiperを使う方法を紹介します。

ReactでSwiperを使う方法

swiperをインストール

swiperをインストールします。

npm install swiper --save

swiperのデモページをチェックする

https://swiperjs.com/demos
上の公式のデモページからイメージに近いものを調べます。

使いたいものが見つかったら、Reactのボタンを押すと、コードとプレビューが同時にみれるcodesandboxが開きます。

必要なものをインポート

// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// import required modules
import { Navigation, Autoplay, Pagination } from "swiper";

Swiper, SwiperSlideは必須で必要になります。
あとは、自動再生を使うならAutoplayを、ページネーションを使うならPaginationを、
矢印のページ送りを使いたいならNavigationをインポートします。

あとは、使う必要のあるモジュールをインポートします。

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

swiperのcssはほぼ必須です。
あとは、使うコンポーネントのcssをインポートします。

Swiperコンポーネントで設定する

<Swiper
          slidesPerView={1}
          spaceBetween={30}
          navigation={true}
          mousewheel={true}
          keyboard={true}
          pagination={{
            clickable: true,
          }}
          autoplay={{
            delay: 2500,
            disableOnInteraction: false,
          }}
          breakpoints={{
            601: { slidesPerView: 2 },
            1025: { slidesPerView: 3 },
          }}
          loop={true}
          modules={[Navigation, Autoplay, Pagination, Mousewheel, Keyboard]}
          className="mySwiper"
        >
          {testimonials.map((testimonial) => (
            <SwiperSlide key={testimonial.id}>
              <Testimonial testimonial={testimonial} />
            </SwiperSlide>
          ))}
        </Swiper>

Swiperコンポーネントに設定を追加します。
modulesで使うモジュールを指定します。
ページ送り、mousewheel、keyboardなどはtrueを渡すだけです。
ページネーションはclickableやclickableClassなどを設定できます。
autoplayはオブジェクトにして、遅延時間などを設定できます。
disableOnInteractionは、触っても自動再生が止まらないようにするかどうか指定できます。
breakpointsの設定では、swiperはモバイルファーストアプローチなので、スマホのときにどうするかを設定して、
breakpointsでそれ以上大きいときの状態を指定します。

サンプル実例

// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "./testimonials.css";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";
// import required modules
import { Navigation, Autoplay, Pagination, Mousewheel, Keyboard } from "swiper";

// 自分のデータ
import testimonials from "./data";
import Testimonial from "./Testimonial";

const Sample = () => {
  return (
    <section id="testimonials">
      <div className="contaienr">
        <Swiper
          slidesPerView={1}
          spaceBetween={30}
          navigation={true}
          mousewheel={true}
          keyboard={true}
          pagination={{
            clickable: true,
          }}
          autoplay={{
            delay: 2500,
            disableOnInteraction: false,
          }}
          breakpoints={{
            601: { slidesPerView: 2 },
            1025: { slidesPerView: 3 },
          }}
          loop={true}
          modules={[Navigation, Autoplay, Pagination, Mousewheel, Keyboard]}
          className="mySwiper"
        >
          {testimonials.map((testimonial) => (
            <SwiperSlide key={testimonial.id}>
              <Testimonial testimonial={testimonial} />
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
    </section>
  );
};

export default Sample;