Swiper(스와이퍼) - 자바스크립트 슬라이더 스크롤 플러그인 / 비슷한 플러그인들

어느 사이트를 방문하면 스크롤바가 없고 섹션이 나누어져 스크롤되는 것을 볼 수 있다.

말로 설명하기는 어려우니 밑에 예제를 보면 된다.

 

[예제]

멋쟁이 사자처럼 / 여기어때 잘난 체 / 배달의 민족 / 자라 

멋쟁이사자처럼 :: LIKELION

여기어때 서체 출시!

대한민국 1등 배달앱, 배달의민족

ZARA South Korea / 대한민국 | 새로운 컬렉션 온라인

 

[처음 사용한 플러그인]

나는 현재 스타트업의 랜딩페이지 제작을 담당하고 있다.

처음에 이 효과(?)를 직접 개발하려 했다. 하지만 어렵다는 걸 깨닫고 구글링 해본 결과 다양한 플러그인이 있다는걸 알게 됐다.

 

처음 사용한건 Pageable이다.

(밑 게시글에는 fullpage 플러그인에 대한 설명도 나와있다.)

배달의 민족 랜딩 페이지, fullpage.js 그리고 대안

 

Pageable 플러그인을 선택한 이유는 다음과 같다.

- 순수 자바스크립트를 사용해서 수정하기 편리하다고 생각했다.

- 무료다.

 

Mobius1/Pageable

 

첫번째 이유가 떠오른 이유는 api를 잘 모르던 내가 이 플러그인을 뜯어서 내 취향에 맞게 직접 수정해야 한다고 생각했다.

하지만 그럴 필요가 없다는걸 깨달았다.

 

이 플러그인을 사용하다보니 내가 원하던 게 아니란 걸 알게 됐다.

위의 깃허브에 있는 데모를 보면 알겠지만 스크롤의 양에 따라 그만큼의 섹션이 넘어가게 된다.

(즉 스크롤을 세게 할수록 섹션들이 한꺼번에 넘어간다.)

 

또한 다른 플러그인에 비해 인기가 별로 없는 플러그인이라 관련 정보가 적다!!

 

[대안을 찾아보자]

pageable에 답답함을 느끼던 와중 무료이며, 전환이 부드럽고, 많은 사람들이 써서 활발한 플러그인을 찾게 되었다.

nolimits4web/swiper

 

우선 깃허브의 star가 26.2k라는 거에 놀랐고 (토론 창 또한 활발하다.)

아주 친절한 설명서 사이트가 있다는 거에 두 번 놀랐다.

Swiper - The Most Modern Mobile Touch Slider

데모 사이트를 보면 알겠지만 다양한 효과를 적용할 수 있다.

(스크롤 방향, Infinite Loop, Fade 효과, Flip 효과 등)

 

어제부터 Swiper 플러그인으로 개발 중인데 사용하다 불편한 점이 있으면 또 글을 남겨야겠다.