[React Swiper] 리액트에서 스와이퍼 사용하기

리액트에서 Swiper 모듈 사용하기

 

* 일단 Swiper를 npm install 했다는 전제하에

 

1. swiper를 import 해준다.

import React, { useRef, useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, {
  Autoplay,
  FreeMode,
  Pagination,
  Navigation,
  A11y,
} from 'swiper';

 

2. swiper 컴포넌트 사용하기

<Swiper
    modules={[Navigation, Pagination, A11y]}
    className="related-fund__list board__list type-box box-block3"
    pagination={{ clickable: true }}
    navigation
    breakpoints={{
      0: {
        slidesPerView: 1,
        initialSlide: 0,
        spaceBetween: 10,
      },
      1024: {
        slidesPerView: 3,
        initialSlide: 0,
        spaceBetween: 0,
      },
    }}
  >
  	 <SwiperSlide></SwiperSlide>
 </Swiper>

swiper props로 공식문서를 확인하면서 필요한 것을 추가하면된다.

https://swiperjs.com/swiper-api

Swiper API

 

- breakpoints는 반응형 처리를 할 수 있다

위와 같이 작성하면 0~1023px 까지는 한페이지에 한개 슬라이드 보여주고, 1024px 이상부터는 3개 슬라이드를 보여준다.

(각 반응형마다 필요한 것을 추가해서 쓰면된다)

- pagination, navigation을 사용하고 싶으면 modules에 먼저 작성해주고 나서 써줘야한다.

- Ally는 웹접근성 관련된 모듈이다

 

은근 유용했던 api

slidesOffsetBefore: 20,
slidesOffsetAfter: 20

스와이퍼 맨앞과 맨뒤에 공간 (마진) 주는 역할

 

slidesPerView 의 값을 'auto'로 부여하면?

- <SwiperSlide> 의 넓이만큼 슬라이드가 보인다. (아래 사진처럼)

autoHeight을 true로 주면?

per slide마다 슬라이드가 늘어났다 줄어들었다 한다.