Library React Swiper 응용하기 (module, props...)

기본편 보러가기

Library React Swiper 슬라이드 가능한 컴포넌트 만들기

 

기본편에서 말했듯 React Swiper는 여러가지 모듈, props, style등을 활용해 자유도를 높였다.

 

먼저 모듈부터 살펴보자.

 

 

 

Navigation 모듈은 슬라이더에 이전/다음 버튼을 추가한다. 클릭하면 슬라이더가 넘어간다.

import SwiperCore, { Navigation } from 'swiper';
import 'swiper/css/navigation';

SwiperCore.use([Navigation]); 

<Swiper navigation={true}>
	...
</Swiper>

 

Pagination 모듈은 슬라이더에 페이지 안내기능을 추가한다. 이 또한 클릭하면 원하는 슬라이더로 이동한다.

import SwiperCore, { Pagination } from 'swiper';
import 'swiper/css/pagination';

SwiperCore.use([Pagination]);

<Swiper pagination={true}>
	...
</Swiper>

 

 

Autoplay 모듈은 슬라이더가 자동으로 전환되도록 한다.

import SwiperCore, { Autoplay } from 'swiper';

SwiperCore.use([Autoplay]);

<Swiper autoplay={{ delay: 3000,disableOnInteraction: false, }}>
	...
</Swiper>

 

 

EffectCube 모듈은 슬라이드 전환 효과 중 하나인 큐브 효과를 적용한다.

import SwiperCore, { EffectCube } from 'swiper';

SwiperCore.use([EffectCube]);

<Swiper effect={'cube'}>
	...
</Swiper>

 

 

Virtual 모듈은 매우 큰 슬라이드 데이터를 처리할 때 사용한다. 데이터량을 가상화시켜 랜더시간이나 렉지연을 단축시킨다.

import SwiperCore, { Virtual } from 'swiper';

SwiperCore.use([Virtual]);

<Swiper virtual>
	...
</Swiper>

 

 

Keyboard 모듈은 슬라이더 제어를 키보드로 가능하게 한다.

import SwiperCore, { Keyboard } from 'swiper';

SwiperCore.use([Keyboard]);

<Swiper keyboard={{ enabled: true,onlyInViewport: true, }}>
	...
</Swiper>

 

 

Mousewheel 모듈은 마우스 휠 스크롤을 사용하여 슬라이드를 이동할 수 있게 한다.

import SwiperCore, { Mousewheel } from 'swiper';

SwiperCore.use([Mousewheel]);

<Swiper mousewheel={{forceToAxis: true, releaseOnEdges: true, }}>
	...
</Swiper>

 

다음은 swiper에서 제공하는 주요 props를 정리했다.

 

 

slidesPerView: 한 페이지에 보여줄 슬라이드 개수를 설정하여, 한 번에 여러 슬라이드를 보여줄 수 있게 해준다.

<Swiper slidesPerView={3}>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
</Swiper>

spaceBetween: 슬라이드 간 간격을 설정하여, 각 슬라이드 간의 간격을 조절할 수 있게 해준다.

<Swiper spaceBetween={20}>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
</Swiper>

centeredSlides: 슬라이드를 중앙 정렬할지 여부를 설정하여, 슬라이드가 중앙에 위치하도록 할 수 있게 해준다.

<Swiper centeredSlides>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
</Swiper>

initialSlide: 슬라이드 시작 인덱스를 설정하여, 슬라이더를 특정 슬라이드에서 시작할 수 있게 해준다.

<Swiper initialSlide={2}>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
</Swiper>

loop: 슬라이드 루핑 여부를 설정하여, 슬라이드를 처음으로 돌아가게 하거나 무한대로 반복할 수 있게 해준다.

<Swiper loop>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
</Swiper>

autoplay: 자동 슬라이드 전환 여부와 시간 간격을 설정하여, 슬라이드를 자동으로 이동시키게 해준다.

<Swiper autoplay={{ delay: 3000 }}>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
</Swiper>

navigation: 이전/다음 버튼 사용 여부와 설정하여, 슬라이드 이동을 버튼으로 제어할 수 있게 해준다.

<Swiper navigation>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
</Swiper>

pagination: 페이지 매김 사용 여부와 설정하여, 슬라이드의 페이지 매김을 보여줄 수 있게 해준다.

<Swiper pagination={{ clickable: true }}>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
</Swiper>

effect: 슬라이드 전환 효과를 설정하여, 다양한 전환 효과를 사용할 수 있게 해준다.

<Swiper effect="fade">
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
</Swiper>

virtual: 매우 큰 슬라이드 데이터를 처리할 때 사용하여, 가상 슬라이드를 생성할 수 있게 해준다.

<Swiper virtual>
  <SwiperSlide>Slide 1</SwiperSlide>
  <SwiperSlide>Slide 2</SwiperSlide>
  <SwiperSlide>Slide 3</SwiperSlide>
</Swiper>

 

간략하게 props로 사용하는 방법만 적어보았다.

좋아보인다고 막 사용하는 것이 아니라 기획한 페이지와 맞는가, 이슈는 발생하지 않는가 등을 고려하여

작업중인 프로젝트에 알맞는 기능들로 응용하면 좋을 것 같다.

 

글을 작성하기 위해, swiper를 사용하기 위해 참고했던 문서

https://swiperjs.com/react