바닐라자바스크립트 할때 제일 힘들게 했던건 스와이프 기능 구현하기였다. 힘들게 만든 스와이프 기능도 CORS 에러로 잘 구현이 안됨 🙃리액트는 스와이퍼 라이브러리로 간단하게 스와이프 기능을 구현할 수 있다.
리액트 스와이퍼 공식문서
1. 기능구현에 필요한 스와이퍼 라이브러리 먼저 설치한다.
yarn add swiper
2. 필요한 모듈을 import 해준다. 나는 Pagination, Autoplay 씀.
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Scrollbar, Autoplay } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import 'swiper/css/autoplay';
3. 필요에 따라 스와이퍼를 세팅한다.
<Swiper
// 필요한 스와이퍼 모듈 세팅
modules={[Pagination, Autoplay]}
spaceBetween={0}
slidesPerView={1} // 한 화면에 몇개의 요소를 보여줄 것인지
pagination={{ clickable: true }}
// onSwiper={(swiper) => console.log(swiper)}
// onSlideChange={() => console.log('slide change')}
autoplay={{ delay: 2000 }} // 2초마다 슬라이드 전환
>
<SwiperSlide>
슬라이드 1
</SwiperSlide>
<SwiperSlide>
슬라이드 2
</SwiperSlide>
<SwiperSlide>
슬라이드 3
</SwiperSlide>
</Swiper>;
결과
'TIL' 카테고리의 다른 글
TIL 23.08.18 [App router] layout (0) | 2023.08.18 |
---|---|
TIL 23.08.14 [벼락샌드] 팀프로젝트 회고 (0) | 2023.08.15 |
TIL 23.08.09 React 아임포트/ 포트원 카드 결제창 구현하기 (0) | 2023.08.09 |
TIL 23.08.08 supabase 데이터 불러오기 (0) | 2023.08.08 |
TIL 23.08.07 Supabase 설정 (0) | 2023.08.07 |