● swiper の インストール

npm install swiper

pages/_app.js

import "swiper/swiper.scss";

components/SwiperComponent.jsx

import * as React from 'react';
import SwiperCore, { Pagination, Autoplay } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";

SwiperCore.use([Pagination, Autoplay]);

// interface Props {
//   imageData: Array<string>;
//   isAuto: boolean;
//   clickable: boolean
// }

const SwiperComponent = (props) => {
  return (
    <div style={{ zIndex: -9999 }}>
      <Swiper pagination={{ clickable: props.clickable }} autoplay={props.isAuto}>
        {props.imageData.map((imageSrc, i) => {
          return (
            <SwiperSlide key={`${imageSrc}${i}`}>
              <div className="top_banner_background_image" style={{ backgroundImage: `url(${imageSrc})` }}></div>
            </SwiperSlide>
          );
        })}
      </Swiper>
    </div>
  );
};
export default SwiperComponent;

表示させる

          <SwiperComponent
            imageData={[
              "img/top_banner_background_02.png",
              "img/top_banner_background_01.png",
            ]}
            isAuto={true} clickable={false}
          />