Swiper js React에서 사용하기

일단, 왜 Swiper 이냐?

뭘 해야할지 잘모르고 구글링을 해보다가 자주쓰이는 라이브러리 top10이라는 블로그를 우연히 들어가서,

찾아보니까 다른건 다 한번씩 본 것 같은데 Swiper js 를 처음 봐서 써보면 좋을 것 같아서 한번 사용해봤다.

1. Install

$ npm i swiper

2. Use

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

import 'swiper/css';

export default () => {
  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에 swipe 관련된 속성을 넣고,

SwiperSlide에 swipe를 하는 요소가 들어간다.

3. Swiper 요소

Virtual- 가상 슬라이드 모듈
Keyboard- 키보드 제어 모듈
Mousewheel- 마우스휠 제어 모듈
Navigation- 내비게이션 모듈
Pagination- 페이지 매김 모듈
Scrollbar- 스크롤바 모듈
Parallax- 시차 모듈
FreeMode- 자유 모드 모듈
Grid- 그리드 모듈
Manipulation- 슬라이드 조작 모듈(Core 버전에만 해당)
Zoom- 줌 모듈
Controller- 컨트롤러 모듈
A11y- 접근성 모듈
History- 역사 탐색 모듈
HashNavigation- 해시 탐색 모듈
Autoplay- 자동 재생 모듈
EffectFade- 페이드 효과 모듈
EffectCube- 큐브 효과 모듈
EffectFlip- 뒤집기 효과 모듈
EffectCoverflow- Coverflow 효과 모듈
EffectCards- 카드 효과 모듈
EffectCreative- 크리에이티브 효과 모듈
Thumbs- 엄지손가락 모듈

이런식으로 많은 모듈들이 있는데,

일단 주로 사용하고, 제가 사용한 코드, 요소들에 대해서 소개해보겠습니다

4. Mine

import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Autoplay } from 'swiper/modules';

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

function App() {
  const ImgSliderData = [
    {
      id: 0,
      src: ''
      title: 'title',
      text: 'text',
    },
    {
      id: 1,
      src: ''
      title: 'title',
      text: 'text',
    },
    {
      id: 2,
      src: ''
      title: 'title',
      text: 'text',
    },
  ];

  return (
    <Swiper
      spaceBetween={10}
      autoplay={{
        delay: 2500,
        disableOnInteraction: false,
      }}
      loop={true}
      height={800}
      pagination={{ type: 'fraction' }}
      navigation={true}
      modules={[Autoplay, Pagination, Navigation]}
    >
      {ImgSliderData?.map((slideData) => {
        return (
          <SwiperSlide key={slideData.id}>
            <img src={slideData.src} alt="slideImg" />
          </SwiperSlide>
        );
      })}
    </Swiper>
  );
}

export default App;

먼저 요소들의 설명을 하자면

spaceBetween - 슬라이드 간격

autoplay - 스와이프 autoplay

loop - 반복(boolean)

pagination - 페이지의 수 보여주기

navigation - 슬라이드 버튼 보여주기

으로 되어있고,

나머지 설명은 영상으로 보면 더 이해가 잘 갈 것 같아, 영상으로 띄우겠습니다!

5. 느낀점

새로운 라이브러리를 조사할 때마다 느낀것이지만 항상 새롭고 써보면서 속성들을 하나하나씩 익혀가니까

더 재밌는 것 같다.

재균의 FE일지