[React] Swiper 사용하기

swiper를 사용해서 슬라이드를 간편하게 구현할 수 있다는 것을 알게된 이후로 정말 애용했는데, 생각해보니 글로 남긴 적은 한 번도 없었던 것 같아서 이번에 신규로 프로젝트를 진행하며 스와이퍼 쓸 일이 생겼길래 이때다 싶어서!?! 한 번 기록해보려 한다..!

1. swiper 설치 (+ 공홈 문서 참고하면 좋음)

npm i swiper

2. 네비게이션, 스크롤바, 페이지네이션 사용 시에 아래 코드 필수로 import 해주기!

import { Navigation, Pagination, Scrollbar } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

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

공식 홈페이지 Docs를 참고하면 아래처럼 잘 나와있다!

이런 느낌으로 양쪽에 화살표 버튼과 자동으로 슬라이드를 넘겨주게 만들어보자!

상단에 꼭!! import해주기!!
자동 넘김 기능을 위해 autoplay 추가와 화살표 클릭으로 넘기는 기능을 구현하기 위해 navigation을 import시켜줬다.

이미지를 넣어주기 위하여 map함수를 사용하고, html 코드가 난잡하게 보이는 게 싫어서 params를 써서 따로 분리시켜줬다! ...은 중괄호를 없애기 위하여 넣어주었다.

사용할 모듈을 넣어주고,
slidesPerView에는 한 화면에 보여질 이미지 수,
loop: true로 무한루프를 적용하여 마지막 이미지까지 도달했을 시, 다시 첫 이미지를 보일 수 있도록 만들어주었다.
자동 슬라이드 넘김을 위하여 2.5초의 delay시간과 함께 autoplay적용!
navigation을 사용하기 위하여 navigation: true를 넣어주었다!

화살표 색상을 조금 바꿀까 생각 중인데, 바꾸게 된다면 또 글을 작성해봐야겠다!🥰