[React] Swiper

Swiper

슬라이드 같은 기능을 제공하는 라이브러리.

 

- 설치

npm i swiper

 

사용하기 위해서는 파일에 import 시켜줘야한다.

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

 

import React from "react";
import { Navigation, Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';

const App = () => {
return (
  <div className="App">
  <Swiper
    spaceBetween={50}  //슬라이드 간의 간격
    slidesPerView={1}  //한번에 보일 슬라이드 개수
  >
    <SwiperSlide>Slide 1</SwiperSlide>
    <SwiperSlide><div className="slides">Slide 2</div></SwiperSlide>
    
    {SlideImg.map((slide) => (
    	<SwiperSlide key={slide.id}><img src={slide.src} /></SwiperSlide>
    ))}
  </Swiper>
  </div>
);
};
export default App;

 

위와 같이 사용하면 된다.

다만, react버전에 따라 SwiperSlide에 className을 붙이면 에러가 나는 경우도 있으니, 이럴 때는 따로 div를 통해 className을 붙여주면 된다.

 

- Swiper 옵션

 

swiper는 기본 기능 외에 다른 원하는 기능을 추가할 수 있다.

 

- navigation

이전, 다음 버튼 기능을 제공.

선택자: nextEl(다음), prevEl(이전)

<Swiper>
	...
    navigation = {{
    	nextEl:
        prevEl:
        }}
</Swiper>

 

 

- pagination

현재 페이지가 어딘지(?) 알려주는 기능(페이징).

type: bullets, fraction, progressbar, custom (종류, 기본값 bullets)

<Swiper>
	...
    pagination={{
    	clickable: true,  //클릭으로 페이지 변경도 가능
        type: 'bullets'
    }}
</Swiper>

 

 

- autopaly

자동으로 다음 슬라이드로 넘어가는 기능.

delay: 딜레이 시간(ms)

<Swiper>
	...
    autoplay= {{
    	delay: 2000,
        disableOnInteraction: false  //사용자가 스와이프 후에 자동 재생이 중단되지 않음
    }}
</Swiper>

 

 

- loop

슬라이드의 반복 기능.

<Swiper>
	...
    loop  //loop={true} 기본값 true
</Swiper>

 

 

- scrollbar

스크롤바 기능.

hide: 스크롤바 숨김

<Swiper>
	...
    scrollbar= {{
    	hide: true
    }}
</Swiper>