スライド機能をreact-id-swiperで実装したらめちゃくちゃ簡単だった話

最近の勉強で学んだ事を、ノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです！

Reactでスライド機能を実装したい

こんな感じの画像をスライドで表示する機能を実装したい

調べてみるとreact-id-swiperが良さげでした！

Swiper (react-id-swiper)を導入

1.react-id-swier をインストール

$ npm install --save react-id-swiper@latest swiper@latest

2.こちらのサイトで好みのサンプルを探して実装する。
スライドをループできる様にしたかったのでこちらを引用しました！

  import React from 'react';
  import Swiper from 'react-id-swiper';
  const LoopModeInfinityLoop = () => {
    const params = {
      slidesPerView: 1,
      spaceBetween: 30,
      loop: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      }
    }
    return (
      <Swiper {...params}>
        <div>Slide #1</div>
        <div>Slide #2</div>
        <div>Slide #3</div>
        <div>Slide #4</div>
        <div>Slide #5</div>
      </Swiper>
    )
  };
  export default LoopModeInfinityLoop;

これを参考にして、こんな感じで実装完了！

const params = {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    };
.
.
.
<Swiper {...params}>
    {images.map((image) => (
        <div key={image.url}>
            <ImageStyled
                id="DonationImage"
                src={image.url}
                size="medium"
                centered
            />
        </div>
     ))}
</Swiper>

参考記事

・React で Swiper 使ってみた (react-id-swier)
・react-id-swiper