56일차 - 리액트 스와이퍼

1. 리액트 스와이퍼 설치 npm i swiper

https://swiperjs.com/react 에서 설치식 및 사용법 확인

2. 리액트 스와이퍼 사용법

2-1. Swiper & SwiperSlide 2개의 컴포넌트를 import

+) css도

2-2. const 스와이퍼 = ( )=>{ return식 }

2-2-1) 위의 Usage에서 그대로 복붙해 return 안에 삽입

이대로 끝내면 스와이퍼가 나오지 않음. 실행식을 써줘야!

2-2-2) APP( ){ return 안에 선언한 스와이퍼 실행식 삽입 }

---

3. autoplay 추가로 넣고 싶다면, 모듈로 호출

사용법 ex) https://swiperjs.com/react

3-1. 복붙복붙

import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';

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

modules={[Navigation, Pagination, Scrollbar, A11y]}

navigation
pagination={{ clickable: true }}
scrollbar={{ draggable: true }}

3-2 Demos → autoplay (react) 실행식 복붙

결과물
Navigation, Pagination, Scrollbar, A11y 그리고 autoplay 적용된 것 확인