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}
/>