React에서 Swiper 사용기

beomjourr·2021년 11월 20일

라이브러리사용기

Swiper

스와이프 기능이 필요해서 찾아보다가 선택하게 됨

사용하게 된 계기

리액트 내에서 스와이프 기능을 구현하기 위해 관련 라이브러리를 찾다가 알게된 라이브러리
github stars수에서 알 수 있듯이 인기 있는 라이브러리라 Swiper로 결정하기로 함

시작하기

swiper 공식 홈페이지 주소

https://swiperjs.com/

공식 홈페이지가 잘 되어 있는 라이브러리 중 하나
VanillaJS 뿐만 아니라 React, Svelte 등 다양한 프레임워크(라이브러리)에서의 사용법 제공

Swiper React는 기본 Swiper 라이브러리의 일부로 npm을 통해서만 사용 가능하다

yarn으로도 설치가 가능한 거 보니, cdn 방식은 제공되지 않는다는 말인거 같다.

npm i swiper

2021.11.22 기준 최신버전은 v7.3.0
하지만, 최신버전으로 예제 코드를 실행시키면
Module not found: Can't resolve 'swiper/css' in '~~~' 에러가 발생한다.
찾아보니, swiper 버전을 6버전으로 다운그레이드 해야 정상적으로 돌아간다.
참고 ) https://stackoverflow.com/questions/69202975/module-not-found-cant-resolve-swiper-react

npm i swiper@6.8.4

또한, 공홈에는 css파일을 이런 식으로 import하지만

import 'swiper/swiper.css';
import 'swiper/swiper.css/navigation';
import 'swiper/swiper.css/pagination';

이런식으로 수정해야 정상 동작한다. 버전 차이때문에 방식이 다른건지는 잘 모르겠다..

import 'swiper/swiper-bundle.min.css'
import 'swiper/swiper.min.css'
import 'swiper/components/navigation/navigation.min.css'
import 'swiper/components/pagination/pagination.min.css'

사용하기

swiper는 Navigation, Pagination 등의 다양한 모듈을 제공

import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

import 'swiper/swiper-bundle.min.css'
import 'swiper/swiper.min.css'
import 'swiper/components/navigation/navigation.min.css'
import 'swiper/components/pagination/pagination.min.css'

export default () => {
  return (
    <Swiper
      // install Swiper modules
      modules={[Navigation, Pagination, Scrollbar, A11y]}
      spaceBetween={50}
      slidesPerView={3}
      navigation
      pagination={{ clickable: true }}
      scrollbar={{ draggable: true }}
      onSwiper={(swiper) => console.log(swiper)}
      onSlideChange={() => console.log('slide change')}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      ...
    </Swiper>
  );
};

기능 정리
1. direction : 정렬 방향 (기본 : 수평정렬, 'vertical' : 수직정렬)
2. spaceBetween : 다음 슬라이드와의 margin

loop : 마지막슬라이드와 첫번째 슬라이드 연결 (true, false)
slidePerView : 한 슬라이드당 보여줄 화면 수
...

Swiper 기본버전과 비교해보자 (동일한 내용은 아님)

<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>