react에서 swiper 사용하기 (feat. reading 'wrapperClass')

다운그레이드 install 해준다

yarn add swiper@6.0.2

다운그레이드 안하면 별짓을해도 안되니까 다운그레이드하자.

index.tsx에 스타일을 박아준다

import "swiper/components/navigation/navigation.scss";
import "swiper/components/pagination/pagination.scss";
import "swiper/swiper.scss"; // core Swiper

나는 navigation이랑 pagination을 쓸거기때문에 이렇게 적었다

 

import

컴포넌트에 사용할 것들을 임포트 해주고

import SwiperCore, { Navigation, Pagination, Parallax } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";

... // 컴포넌트 안에
SwiperCore.use([Navigation, Pagination]);

 

쓴다

맵을 돌려서 뿌려준다..

<Swiper className="custom-swiper">
  {list.map((image, idx) => (
    <SwiperSlide key={image.key}>
      <img draggable="false" src={image.url} alt={`상품 이미지`}></img>
    </SwiperSlide>
  ))}
</Swiper>

 

Next할때도 헤맸기때문에 이번에 다시 정리. 역시 안되면 다운그레이드가 답인가..
직접 구현하려고 하다가 drag의 괴랄함에 치를 떨고 스와이프를 설치...

직접 구현은 따로 해봐야지.