[React] Swiper 적용하기 버전 8.0.0

Swiper를 적용하려고 라이브러리를 찾아보다 Effect coverflow가 맘에 들어 선택하게 됐다.

Swiper Demos

사용 방법

---

공식문서에 나온 대로 따라해봤다. 먼저, swiper 를 설치해준다.

npm i swiper

 

다음으로 import를 해줬는데 모듈을 찾을 수 없다고 오류가 떴다.

package 파일을 찾아보니 현재 내 프로젝트 swiper 버전은 6.8.4였다.

import { Swiper, SwiperSlide } from "swiper/react"; // Import Swiper React components
import { EffectCoverflow, Pagination } from "swiper"; // Swiper에서 가져올 모듈들
import "swiper/css";
import "swiper/css/effect-coverflow";
import "swiper/css/pagination";

 

이는 swiper 버전이 6.8.4라서 발생한 문제인 것 같다. 구글링을 해봤을 때 현재 버전의 Swiper에는 css 폴더가 없다고 한다. 간단히 말해서 swiper/css는 존재하지 않는다는 뜻이다. 그래서 기존의 swiper 버전을 지워주고 8.0.0 버전을 다시 설치해줬다. 그랬더니 해결됨! 결론은 처음부터 8.0.0 버전을 설치하라는 것...  처음에 시행착오로 튜토리얼이랑 구글링 해보고 몇 시간을 날렸는데 알고 보니 버전 문제...

npm uninstall swiper
npm install swiper@8.0.0

 

오류를 해결하고 나서 코드를 적어봤다. (관련 없는 코드 지움)

Swiper에 쓰인 컴포넌트 두 개를 살펴보자면 아래와 같다. Swiper 컴포넌트엔 pagination을 없애줬다.

<Swiper>는 Swiper 기능을 사용할 곳에 부모로 감싸주는 것
<SwiperSlide>는 Slide가 직접적으로 사용될 태그

import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { EffectCoverflow, Pagination } from "swiper";
import "swiper/css";
import "swiper/css/effect-coverflow";
import background1 from "../images/background1.png";

export default function Community() {
  return (
      <Swiper
        effect={"coverflow"}
        grabCursor={true}
        centeredSlides={true}
        slidesPerView={2}
        coverflowEffect={{
          rotate: 50,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: true,
        }}
        modules={[EffectCoverflow, Pagination]}
        className="swiper"
      >
        <SwiperSlide>
          <img src={background1} />
        </SwiperSlide>
        <SwiperSlide>
          <img src={background1} />
        </SwiperSlide>
        <SwiperSlide>
          <img src={background1} />
        </SwiperSlide>
        <SwiperSlide>
          <img src={background1} />
        </SwiperSlide>
        <SwiperSlide>
          <img src={background1} />
        </SwiperSlide>
        <SwiperSlide>
          <img src={background1} />
        </SwiperSlide>
      </Swiper>
  );
}

.swiper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  z-index: 1;
  margin-bottom: 2rem;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 100%;
}

.swiper-slide img {
  width: 100%;
}

 

참고 블로그)

React - app 9 (Swiper로 Slider만들기)