[Next] React 에서 Swiper 사용하기

설치하고 Import 하기

yarn add swiper

import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore, { Navigation, Pagination } from "swiper";
import "swiper/swiper.min.css";
import "swiper/components/pagination/pagination.min.css";

 

헤맨 점

공식문서 임포트 스타일대로 하니 안된다.
import "swiper/css" 이런식으로 하라고 되어있다. (하다하다 하도 안되서 노드모듈 스와이퍼 폴더에 css파일이 있긴한건가 하고 찾아봤는데 있긴하더라..) import swiper css ~~등등 파워 구글링을 했는데 다행히 방법을 찾았다. 위의 방법대로 임포트를 해야 제대로 작동한다.

Module Not found 에러
찾아보니 React strickmode를 끄라그래서 껐더니 잘 동작한다. 깃 커뮤니티를 좀 찾아봤는데 이방법외에 딱히 좋은 방법을 찾지 못해서 이렇게 진행했다.

모듈 사용법
module=([Pagination]);로 사용하라고 하는데, 작동하지 않아서 아래와 같은 방법으로 했다.

SwiperCore.use([Navigation, Pagination]);

<Swiper pagination={{clickable:true}} className="mySwiper">
  {images.map((item, i) => {
    return (
      <SwiperSlide>
        <div
          style={{
            backgroundImage: `url(${item.pic})`,
          }}
          key={item.id}
        >
         테스트
        </div>
      </SwiperSlide>
    );
  })}
</Swiper>

이제 잘 작동한다^^!