fullpageScrollHorizontally 기능 무료로 사용하기 (fullpage와 swiper조합)

오늘 소개할 내용은!

풀페이지로 스토리텔링한 페이지를 제작할때 유용하게 사용중인 fullpage.js 라이브러리입니다.

하지만 2.9.7버전 이후로 3버전 이상부터는 유료버전으로 전환되어 버렸다 ㅠㅠ

아직도 2버전대로 기본적인 기능들은 활용할 수 있어서 자주 애용하긴 하지만

 

확장기능을 사용하려면 결제가 필요하다.

여기서 말하는 확장기능은 아래 주소에서 확인해볼 수 있는데

https://alvarotrigo.com/fullPage/extensions/ko/

fullPage extensions and plugins

영구획득으로 편하게 사용할수 있기는 하지만 가격이 부담스러운건 사실이다..

그 중에 내가 사용하려는 기능은 마우스휠을 이용해서 슬라이더내부에서 동작이 이어지는 fullpageScrollHorizontally 기능이다.

풀페이지에서 하나의 섹션안에 많은내용을 화면에 담으려다보면 슬라이더 기능이 들어가기 마련인데

마우스휠로 동작하고 내려오다가 페이지내에 슬라이더를 만났을때 화살표나 다른 인디게이터를 사용자가 눌러서 직접 슬라이딩하는게 기본기능인데 그게 아니라

마우스휠로 그대로 동작을 이어나가는 방식이다.

 

아래 데모버전에서 스크롤링해보면 바로 이해가 되실거에요 :)

 

https://alvarotrigo.com/fullPage/extensions/scroll-horizontally.html

Scroll Horizontally Extension - fullPage.js

아무튼!!

이 기능을 유료결제없이 swiper.js와 꿀조합하여 비슷하게 구현한 소스를 소개하고자 한다.

 

기존 라이브러리 원본소스를 건드려서 라이선스에 위배되는게 아니라 이미 가지고 있는 기능을 조합해서 사용했기 때문에 제작자분에게는 덜미안? 하다고 자기암시를 해봅니다....ㅇ히히히ㅣㅎ 죄송합니다 하지만 한꾹뿐둘께눈 꿀팁이므로...

 

거두절미하고 아래 소스를 확인하시면 되는데

 

See the Pen fullpage & swiper by 장명호 (@jangmang) on CodePen.

fullpage.js와 swiper.js를 그대로 임포트해온 후에
js에서 3번째줄과 28번째줄 각각의 이벤트내 옵션을 추가한 걸 볼수 있다.

작동방식은 복잡하지 않고 소스내에 주석을 달아놨기 때문에 간단하게 파악하실 수 있을겁니다ㅎ

 

오류나 좋은 아이디어가 있으시다면 댓글 대환영!

 

끝