[React] 리액트 Swiper 사용하기 (리액트 터치 슬라이드)

 

Swiper ?

우리들은 슬라이드를 만들 때 라이브러리를 많이 사용한다.

그 중 터치 슬라이드가 되는 라이브러리가 Swiper 이다.

 

적용하는 법

1. Swiper 설치

//terminal
npm i swiper

swiper npm을 설치한다.

 

2. 스와이퍼 슬라이드 사이트 :

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

 

3. Get Started 클릭 --> React 연결하기

 

4. 상단 Demos 클릭 -->  React 코드 활용 (각종 기본 예제들이 있는 페이지)

 

---

컴포넌트 불러오기

slide components

Swiper 컴포넌트는 slide될 자식들을 감싸는 부모태그가 되어야하며, SwiperSlide가 슬라이드 될 lists가 될 것이다.

 

pagination 추가하기

Swiper API의 pagination은 목록 요소의 개수를 나타내 주는 UI 라고 말할 수 있다.

가장 일반적인 Swiper Pagination은 Swiper 요소의 하단의 숫자들이다.

Swiper 라이브러리는, 공식적으로 한 개의 Swiper에서 Pagination은 오직 한 개의 옵션을 제공하며, 사용 가능하다.

먼저 필요한 컴포넌트들과 컴포넌트에 맞는 style을 import한다. 모두 swiper.js에서 제공한다.

기본적인 swiper기능을 사용할 수 있다.