swiper는 뗄래야 떼어낼수 없는 라이브러리로, 아주 간단한 슬라이드에서부터 더 깊이 파고들어간다면 슬라이드가 동작하는 순간에 기능을 추가할 수도 있습니다. (오류가 많지만 감안할 수 밖에..)
개인적으로는 slick이 더 깔끔하게 작동한다고 생각은 하지만, 기능적인 부분 및 범용성에서는 swiper가 더 많다고 생각해서 swiper를 애용하는 편입니다. (사실 slick의 심화 기능에 대해선 제대로 알지못함..)
그래서 swiper를 사용할 때의 옵션들과 함수들에 대해 알아보려합니다.
swiper의 기본적인 사용법과 예제들에 대해서는 swiperjs 공식사이트의 demo 메뉴에서 확인 가능합니다.
🎇swiper의 event
const swiper = new Swiper(".mySwiper", {
//옵션,
on: {
init: function () {
console.log('swiper initialized');
},
},
});Swiper에는 단순히 슬라이드 변경 시점에 적용하는게 아닌, 변경 시점의 디테일에 따라 적용할 수 있는 유용한 이벤트가 많이 있습니다.
on: { } 내에 작성하여 사용하는 것으로, 그중 제가 사용하기에 유용했던 이벤트들 위주로 정리해보겠습니다.
이벤트들간에 아주 미세한 차이만 있는 경우도 많기때문에, 하나씩 적용해보시면서 적용시점을 찾아가보시는걸 추천드립니다.
activeIndexChange (swiper)
활성 인덱스 변경 시 이벤트가 발생합니다.
beforeSlideChangeStart (swiper)
슬라이드 변경 전환이 시작되기 전에 이벤트가 시작됩니다.
beforeTransitionStart (swiper, speed, internal)
전환 시작 전에 이벤트가 시작됩니다.
changeDirection (swiper)
방향 변경 시 이벤트가 발생합니다.
click (swiper, event)
사용자가 Swiper를 클릭/탭 하면 이벤트가 시작됩니다. touchend 이벤트를 인수로 받습니다.
init (swiper)
Swiper 초기화 직후에 실행됩니다.
observerUpdate (swiper)
옵저버가 활성화되고 DOM 돌연변이를 감지하면 이벤트가 시작됩니다.
realIndexChange (swiper)
실제 인덱스 변경 시 이벤트가 발생합니다.
resize (swiper)
스위퍼의 크기 조정 조작 직전에 창 크기 조정 시 이벤트가 발생합니다.
slideChange (swiper)
현재 활성 슬라이드가 변경되면 이벤트가 시작됩니다.
slideChangeTransitionEnd (swiper)
다른 슬라이드(다음 또는 이전)로의 애니메이션 후 이벤트가 시작됩니다.
slideChangeTransitionStart (swiper)
다른 슬라이드(다음 또는 이전)로의 애니메이션 시작 시 이벤트가 발생합니다.
transitionEnd (swiper)
전환 후 이벤트가 시작됩니다.
transitionStart (swiper)
전환이 시작될 때 이벤트가 시작됩니다.
update (swiper)
swiper.update() 호출 후 이벤트가 시작됩니다.
🎇swiper의 Properties
swiper를 생성할 때, swiper 변수들도 같이 생기며 이를 이용할 수 있습니다.
당연한 얘기일 수도 있겠지만, 변수들마다 형태는 다릅니다.
swiper. 에서 swiper는 사용자가 swiper를 담은 변수의 이름으로 사용해야합니다.
swiper.activeIndex // number
현재 활성 슬라이드의 색인 번호
루프 모드에서 활성 인덱스 값은 항상 여러 개의 루프/복제 슬라이드에서 이동됩니다.
swiper.allowSlideNext // boolean
이 속성에 false/true를 할당하여 다음 슬라이드로 슬라이드 하는 기능을 비활성화/활성화합니다.
swiper.allowSlidePrev // boolean
이 속성에 false/true를 할당하여 이전 슬라이드로 슬라이드하는 기능을 비활성화/활성화합니다.
swiper.allowTouchMove // boolean
이 속성에 false / true를 할당하여 마우스로 잡거나 손가락으로 터치하여(터치 스크린에서) 기능 이동 슬라이더를 비활성화/활성화합니다.
swiper.el // HTMLElement
슬라이더 컨테이너 HTML 요소
swiper.params // SwiperOptions
전달된 초기화 매개변수가 있는 객체
swiper.previousIndex // number
이전에 활성화된 슬라이드의 인덱스 번호
swiper.realIndex // number
루프 모드에서 복제된 슬라이드를 고려한 현재 활성 슬라이드의 인덱스 번호
swiper.slides // Dom7Array
슬라이드 HTML 요소의 Dom7 배열과 유사한 컬렉션입니다.
특정 슬라이드 HTMLElement를 얻으려면 swiper.slides[1]를 사용하십시오.
🎇swiper의 Methods
swiper에 사용할 수 있는 명령어들이 있습니다.
마찬가지로 사용자가 swiper를 담은 변수의 이름으로 사용해야, 해당 swiper에 적용이 됩니다.
swiper.changeDirection(direction, needUpdate)
슬라이더 방향을 수평에서 수직으로 그리고 뒤로 변경합니다.
- direction - 'horizontal' | 'vertical'
- 새로운 방향. 지정하지 않으면 자동으로 반대 방향으로 변경됩니다.
needUpdate - boolean - swiper.update()를 호출합니다. 기본값은 참
swiper.destroy()
슬라이더 인스턴스를 파괴하고 모든 이벤트 리스너를 분리합니다.
swiper.disable()
Swiper를 비활성화합니다(활성화된 경우).
Swiper가 비활성화되면 모든 탐색 요소가 숨겨지고 이벤트 및 상호 작용에 응답하지 않습니다.
swiper.enable()
Swiper 활성화(비활성화된 경우)
swiper.init()
슬라이더 초기화
swiper.slideNext(speed, runCallbacks)
다음 슬라이드로 전환을 실행합니다.
swiper.slidePrev(speed, runCallbacks)
이전 슬라이드로 전환을 실행합니다.
- speed // number : 전환 속도(ms).
- runCallbacks // boolean : false로 설정하면(기본적으로 true) 전환이 전환 이벤트를 생성하지 않습니다.
swiper.update()
수동으로 슬라이드를 추가/제거한 후 또는 숨기거나 표시한 후 또는 Swiper로 사용자 정의 DOM 수정을 수행한 후 호출해야 합니다.
이 메서드에는 별도로 사용할 수 있는 다음 메서드의 하위 호출도 포함됩니다.
👓참고한 문헌
