만들고 싶은 캐러셀 슬라이드가 있었다.
직접 만드는 도중, 드래그 기능에 이것저것 전부 구현할 생각하니 제작기간이 너무 늘어질 것 같았다...
그래서 간단하게 라이브러리 사용하기로 빠르게 결정..!
제일 유명하고 사용하기 쉬운 swiper.js 사용했다.
npm install swiper라이브러리 설치하고 사용함!
swiper 라이브러리 사용법은 굉장히 간단하다.
사용하고 싶은거 import 해와서 사용하면 끝임!
기본 형태
// 스와이퍼 컴포넌트 + 사용할 모듈
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, A11y, Autoplay } from 'swiper/modules';
// 스와이퍼 CSS
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
...
return (
<Swiper
className={styles.mainSwiper}
modules={[Navigation, Pagination, A11y, Autoplay]}
slidesPerView={1}
loop={true}
speed={400}
autoplay={{ delay: 3000, disableOnInteraction: false }}
onActiveIndexChange={(e)=>setSwiperIndex(e.realIndex)}
onSwiper={(e) => {setSwiper(e)}}
>
<SwiperSlide>슬라이드 1</SwiperSlide>
<SwiperSlide>슬라이드 2</SwiperSlide>
<SwiperSlide>슬라이드 3</SwiperSlide>
</Swiper>
)
스와이퍼 기본 사용 형태다.
-
import해올거 해온다.
스와이퍼 컴포넌트인Swiper와SwiperSlide, 그리고 스와이퍼에 사용되는 부가 기능 module들Navigation, Pagination, A11y, Autoplay등 가져옴.
css도 import해서 가져와야함 -
모듈을 import 했다면 컴포넌트
modules속성으로 등록한다.
그러면 해당 모듈 관련 기능이 활성화 된다. -
각종 option 속성들 컴포넌트에 props로 값 설정해주고 세부 설정 가능하다.
slidesPerView- 한 화면에 보이는 슬라이드 개수
loop- 반복
speed- 슬라이드 속도
autoplay- 자동 슬라이드 {delay: 속도, disableOnInteraction: 슬라이드 만지면 기능 끄기 옵션}
onActiveIndexChange- index 변경시 감지하는 이벤트 (= 슬라이드 넘어감을 감지)
realIndex는 현재 활성화된 슬라이드 번호를 나타냄
onSwiper- 스와이퍼 활성화시 작동
이걸 활용해서 원하는대로 전부 커스텀 가능하다.
내 경우에는 네비게이션과 페이지네이션이 스와이퍼 컴포넌트 외부에 있어야했다.
근데 스와이퍼는 기본 형태가 모든 부가 기능들을 스와이퍼 내부에 포함하고 있는 형태임. (컴포넌트니까 당연함...)
간단하게 CSS만 변경해서 바깥으로 밀어내기엔 무리가 있어서 아예 버튼, 페이지네이션용 태그를 스와이퍼 외부에 형제태그로 만들고 거기다가 스와이퍼 기능을 끌어와서 붙여주는 방식으로 진행했다.
<Swiper>
<SwiperSlide>슬라이드 1</SwiperSlide>
<SwiperSlide>슬라이드 2</SwiperSlide>
<SwiperSlide>슬라이드 3</SwiperSlide>
</Swiper>
<div>
<button>왼쪽 버튼</button>
<div>페이지네이션</div>
<button>오른쪽 버튼</button>
</div>(이런 형태임)
그럼 이제 어떻게 스와이퍼 옵션을 끌어다가 연결하느냐..
열심히 구글링 해보니까 얼추 방향을 알게됐다!
커스텀
// 1. 연결을 위한 state 만들기
const [swiperIndex, setSwiperIndex] = useState(0); // -> 페이지네이션용
const [swiper, setSwiper] = useState<SwiperClass>(); // -> 슬라이드용
// 2. 슬라이드 이벤트핸들러
const handlePrev = () => {
swiper?.slidePrev()
}
const handleNext = () => {
swiper?.slideNext()
}
// 3. 연결해서 기능구현!
return (
<Swiper
...
onActiveIndexChange={(e)=>setSwiperIndex(e.realIndex)}
onSwiper={(e) => {setSwiper(e)}}
>
<SwiperSlide>슬라이드 1</SwiperSlide>
...
</Swiper>
<div>
<button onClick={handlePrev}></button>
<div>
<span>{swiperIndex + 1}</span>
<span>{'/'}</span>
<span>{sliderLength}</span>
</div>
<button onClick={handleNext}></button>
</div>
)typescript의 경우, swiper 이벤트를 담아온 state에 <SwiperClass>로 타입지정 해주니까 얌전해졌다.
onActiveIndexChange로 indexChange가 발생할 때 마다 realIndex를 state에 담아줬다.
realIndex는 0부터 시작해서 사용자가 보는 기준에 맞추기 위해서 +1 해줬음.
onSwiper로 스와이퍼 이벤트 객체를 넘겨주고 state에 담아줬다.
그리고 저장된 state에서 slidePrev(), slideNext() 메소드를 꺼내서 작동하도록 이벤트 핸들러 함수를 만들었고 좌,우 버튼 태그에 onClick으로 해당 함수 호출하게 해서 연결시켜줬다.
(slidePrev, slideNext는 스와이퍼 슬라이드 이동 기능임)
이런식으로 태그를 따로 만드니까 css 설정도 자유롭고 더 좋다.
작업하면서 생각보다 간단해서 놀랐고 스와이퍼가 정말 잘 만든 라이브러리라는걸 다시금 느꼈다!
개발자가 원하는 대로 마음껏 커스텀 할 수 있게 모든게 준비되어있다..
이제 원하는 디자인의 이쁜 스와이퍼를 만들 수 있게 됐다! 😄
