캐러셀carousel인지 슬라이더slider인지 통일된 이름은 없지만 특히 쇼핑몰의 메인에 꼭 필요한 라이브러리다.
당시 다니던 회사에서 bxSlider를 개조해 별 문제 없이 사용하고 있었지만 제이쿼리jQuery 의존성이 보기 싫었고 추가 기능이 필요했는데 소스를 어디서부터 건드려야할지 감이 오지 않았다.
그래서 업데이트가 잘되고 가벼운 라이브러리를 찾아나섰고 십 수개의 라이브러리를 찾고 실험해보며 그 중 가장 괜찮았던 슬라이더를 소개한다.
Swiper
업데이트가 가장 활발하고 사용자 층도 두터워 보인다. 애니메이션이나 터치 작동도 자연스럽고 옵션도 다양하다.
nolimits4web
/
swiper
Most modern mobile touch slider with hardware accelerated transitions
초기엔 제이쿼리도 지원했지만 지금은 직접 개발한 dom7이라는 제이쿼리같은 라이브러리를 기본으로 사용한다. 차라리 많은 사이트에서 사용중인 제이쿼리로 만들었다면⋯ 하는 아쉬움이 남는다.
Embla Carousel
상대적으로 최근에 생겼으며, 모던 자바스크립트에 소스 구조도 깔끔하다. 5.9kb의 적은 용량에 안정적이며 빠릿하다.
davidjerleke
/
embla-carousel
www.embla-carousel.com — A lightweight carousel library with fluid motion and great swipe precision.
당시엔 리액트(React)도 지원한 유일한 라이브러리였다. 의존성(dependencies)이 없는 것도 특징이다.
Flicking
네이버에서 만들고 사용중인 라이브러리.
naver
/
egjs-flicking
🎠 ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel.
Slick
그냥 유명해서 넣었다. 제이쿼리 시절 유명했던 것 같다.
kenwheeler
/
slick
the last carousel you'll ever need
유지보수는 이미 2년전부터 종료된 것 같지만 여전히 인기가 많아 놀랍다.
Flickity
정말 심플하다. 상업적인 용도는 라이센스를 구입해야한다.
npm 대신 CDN으로 긁어오거나 스태틱하게 제공하는 경우가 더 많을 것 같아 통계가 신뢰있다고 말하긴 어렵지만 이거 밖에 없다.
Top comments (0)