슬라이드 라이브러리 추천 5개 +

캐러셀carousel인지 슬라이더slider인지 통일된 이름은 없지만 특히 쇼핑몰의 메인에 꼭 필요한 라이브러리다.

당시 다니던 회사에서 bxSlider를 개조해 별 문제 없이 사용하고 있었지만 제이쿼리jQuery 의존성이 보기 싫었고 추가 기능이 필요했는데 소스를 어디서부터 건드려야할지 감이 오지 않았다.

그래서 업데이트가 잘되고 가벼운 라이브러리를 찾아나섰고 십 수개의 라이브러리를 찾고 실험해보며 그 중 가장 괜찮았던 슬라이더를 소개한다.



Swiper

업데이트가 가장 활발하고 사용자 층도 두터워 보인다. 애니메이션이나 터치 작동도 자연스럽고 옵션도 다양하다.

GitHub logo nolimits4web / swiper

Most modern mobile touch slider with hardware accelerated transitions

Embla Carousel

상대적으로 최근에 생겼으며, 모던 자바스크립트에 소스 구조도 깔끔하다. 5.9kb의 적은 용량에 안정적이며 빠릿하다.

GitHub logo davidcetinkaya / embla-carousel

A lightweight carousel library with fluid motion and great swipe precision.

Flicking

네이버에서 만들고 사용중인 라이브러리.

GitHub logo naver / egjs-flicking

🎠 ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel.

Slick

그냥 유명해서 넣었다. 제이쿼리 시절 유명했던 것 같다.

GitHub logo kenwheeler / slick

the last carousel you'll ever need

Flickity

정말 심플하다. 상업적인 용도는 라이센스를 구입해야한다.

GitHub logo metafizzy / flickity

🍃 Touch, responsive, flickable carousels

그 외

splide

GitHub logo Splidejs / splide

Splide is a lightweight, powerful and flexible slider and carousel, written in pure JavaScript without any dependencies.

glidejs

GitHub logo glidejs / glide

A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more

tiny-slide

GitHub logo ganlanyuan / tiny-slider

Vanilla javascript slider for all purposes.

bx-slider

GitHub logo stevenwanderski / bxslider-4

Responsive jQuery content slider

siema

GitHub logo pawelgrzybek / siema

Siema - Lightweight and simple carousel in pure JavaScript

55