[React] Swiper.js 사용하여 슬라이더 구현하기

많고 많은 슬라이더 라이브러리 중 Swiper.js를 선택한 이유?

프로젝트를 진행하다 슬라이더를 구현하게 되어, 이를 간편하게 구현할 수 없을까? 하며 슬라이더를 구현할 수 있는 라이브러리들을 찾아보았다. react-slick, slick-carousel, react-bootstrap, swiper.js 이렇게 찾을 수 있었다. 처음에는 react-slick, slick-carousel 을 사용하였는데, 자유로운 디자인이 불가능하다는 단점을 찾게 되었다. 이번 프로젝트는 디자이너가 만든 디자인이기에 섬세한 디자인이 꽤나 많이 들어가있다. 하지만 앞서 말한 두 라이브러리의 경우 섬세한 디자인 작업이 힘들다는 것을 알게 되었다. react-bootstrap은 디자인이 너무 단조로워서 탈락. swiper.js가 디자인도 자유롭게 조정할 수 있고, 기능 또한 많아서 이걸 사용하기로 결정하였다!!

Swiper.js란?

반응형 슬라이드쇼 및 스와이퍼 기능을 쉽게 구현할 수 있도록 해주는 라이브러리

https://swiperjs.com/

설치 및 사용 방법

npm install swiper

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

export default SlideSwiper() => {
  return (
    <Swiper
      spaceBetween={50}
      slidesPerView={3}
      onSlideChange={() => console.log('slide change')}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      ...
    </Swiper>
  );
};

Swiper라는 컴포넌트로 크게 감싸고, SwiperSlide라는 컴포넌트를 사용하여 각 슬라이드를 구현한다.

Swiper에는 다양한 옵션이 존재하는데, 이 옵션들을 사용하여 슬라이더의 속도, 방향, 함수 등을 설정할 수 있다.

Swiper.js의 옵션

• direction : 슬라이드의 방향을 설정한다.
  • horizontal : 수평 방향 (기본값)
  • vertical : 수직 방향
• speed : 슬라이드의 속도를 설정한다.
• loop : 슬라이드 루프 설정 여부를 결정한다.
  • true : 무한 루프 (기본값)
  • false : 루프 X
• autoplay : 자동 재생 여부를 설정한다.
  • false : 자동 재생 X (기본값)
  • true : 자동 재생 O
• navigation : 이전/다음 버튼 설정 여부를 결정한다.
  • prevEl : 이전 버튼 선택자
  • nextEl : 다음 버튼 선택자
• spaceBetween : 슬라이드 간의 간격을 설정한다.
• slidesPerView : 한 번에 보이는 슬라이드 수를 설정한다.
• onSlideChange : 슬라이딩되었을 때 실행될 함수를 설정한다.
• centeredSlides : 슬라이드를 가운데로 정렬할 지 설정한다.
• effect: 슬라이드 애니메이션 효과를 설정한다. (요건 https://swiperjs.com/demos ← 여기서 직접 구경하는 것을 추천!!)
  • slide : 기본 슬라이드
  • cards : 카드 효과
  • coverflow : 커버플로우 효과
  • creative : 크리에이티브 효과
  • cube : 큐브 효과
  • fade : 페이드 효과
  • flip : 플립 효과

슬라이더에 디자인 추가하기

• .swiper-slide : 슬라이드
  • .swiper-slide-active : 활성화된 슬라이드
    • .swiper-slide-prev : 활성화된 슬라이드의 이전 슬라이드
    • .swiper-slide-next : 활성화된 슬라이드의 다음 슬라이드
• .swiper-button : 슬라이드 버튼
  • .swiper-button-prev : 이전 버튼
  • .swiper-button-next : 다음 버튼
    • --swiper-navigation-size : 버튼의 사이즈를 조절하는 프로퍼티!!
      (이걸 따로 써놓은 이유는 width, height 조절한다고 해서 버튼 사이즈 안 달라진다는 걸 알게 되었기 때문ㅇ…)

주의사항

• 슬라이더의 상위 컴포넌트는 무조건 display: block 이어야 한다.
• 왜 안되나 했더니, 슬라이더 라이브러리들은 다 flexbox를 막아놨다고 한다.
  (이 부분에 대해서는 조금 더 조사해봐야겠다… 이것 때문에 꽤나 애먹음..)