[Nextjs 스와이프] Swiper 사용

https://swiperjs.com/get-started

Getting Started With Swiper

npm install swiper

 

Next.js를 사용 하기 때문에 Swiper react 공식문서 참고

https://swiperjs.com/react

Swiper React Components

import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Autoplay } from 'swiper';
import 'swiper/css';

SwiperCore.use([Autoplay]);

<Swiper
    slidesPerView={1}
    loop={true}
    autoplay={{
        delay:2000
    }}
    >
    <SwiperSlide>{Slide()}</SwiperSlide>
    <SwiperSlide>{Slide()}</SwiperSlide>
    <SwiperSlide>{Slide()}</SwiperSlide>
    <SwiperSlide>{Slide()}</SwiperSlide>
</Swiper>

Next.js typescript를 사용 하고 있어서 뭔가 설정 더 해줘야 될줄 알았지만, 공식 문서대로 하면 됨.