swiper 그만 하고 glide 합시다

glidejs.com/docs/

Glide.js | A dependency-free JavaScript ES6 slider and carousel

 

Dependency-free + ~23kb (~7kb gzipped) with every functionality included.

안 쓸 이유가 없다. 무엇보다 react-swiper가 약간 buggy하다는 평도 오카방에서 돌더라. 

 

무엇보다 지금까지 carousel은 외부 패키지를 쓰지 않고 전부 내가 직접 만들어 썼는데

그 이유가 swiper가 너무 말을 안 들어서 화나가 이럴 바엔 내가 직접 만든다는 생각이 들어서였다.

glide는 그런 부분이 훨씬 덜해서 좋다.

 

도큐멘테이션도 너무 잘 되어 있어서 이런 패키지 사용글을 써야 할 이유도 없지만, 홍보를 위해 ㅋㅋ

 

설치

yarn add @glidejs/glide
yarn add @types/glidejs__glide

 

슬라이더 세팅 및 시작

기본 스타일링 등은 문서를 보자. => glidejs.com/docs/setup/

 

아래는 glide의 기본적인 structure다. 가만 보면, class로 DOM의 역할을 구분하고 있음을 알 수 있다.  패키지의 기본 규칙이므로 지켜주자. arrow, bullets과 같은 기능들도 마찬가지로 class로 지정할 수 있는데 자세한 부분은 공식 문서 참고를 권장한다.

 

또한, 일반 css에서도 마찬가지인데 data- 꼴의 class 값은 데이터 속성이라고 하여 js에서 dataset으로 가져올 수 있다.

=> MDN의 문서로 설명을 갈음한다. developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes

=> glide에서는 이러한 데이터 속성 중 특수한 내용을 붙여 슬라이더의 속성을 지정할 수 있다. glidejs.com/docs/data-attributes/ 참고

 

<div class="glide">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide">0</li>
      <li class="glide__slide">1</li>
      <li class="glide__slide">2</li>
    </ul>
  </div>
</div>

// 일반적인 시작
import Glide from '@glidejs/glide'

new Glide('.glide').mount()

// 용량을 극도로 줄이고 싶다면 tree shaking도 가능
import Glide, { Controls, Breakpoints } from '@glidejs/glide/dist/glide.modular.esm'

new Glide('.glide').mount({ Controls, Breakpoints })

 

 

기타 Glide의 옵션들

glidejs.com/docs/options/

new Glide('.glide', {
  type: 'slider',
  startAt: 3,
  perView: 6,
  gap: 10, // px
  bound: false, // true면 마지막 시간대에서 튕겨져 나가서 ux에 좋지 않음
  focusAt: 'center',
}).mount();

 

 

Glide Event => glide는 이벤트 에미터 객체다.

glidejs.com/docs/events/

 

glide 객체는 이벤트 에미터 패턴을 채용하는 듯합니다.

mount.before, mount.after, update, play, build:before, build:after, run 등 특정한 이벤트에 따른 로직을 처리할 수 있습니다.

const glide = new Glide('.glide')

glide.on('mount.before', function() {
  // Handler logic ...
})

glide.mount()