swiper 옵션 정리 properties methods event

swiper 옵션 정리 properties methods event

 

1.Properties

const swiper = new Swiper('.swiper', {
   onAny(eventName, ...args) {
     console.log('Event: ', eventName);
     console.log('Event data: ', args);
   }
 });

Slider를 초기화한 후에는 유용한 메서드와 속성을 사용하여 변수에 초기화된 인스턴스(위 예의 swiper 변수)를 갖게 됩니다.

 

swiper.$el  //  Dom7Array 

슬라이더 컨테이너 HTML 요소가 있는 Dom7 요소입니다. 바닐라 HTMLElement를 얻으려면 swiper.el을 사용하십시오.

 

swiper.$wrapperEl  //  Dom7Array 

슬라이더 래퍼 HTML 요소가 있는 Dom7 요소. 바닐라 HTMLElement를 얻으려면 swiper.wrapperEl을 사용하십시오.

 

swiper.activeIndex  //  number  

현재 활성 슬라이드의 색인 번호
루프 모드에서 활성 인덱스 값은 항상 여러 개의 루프/복제 슬라이드에서 이동됩니다.

 

swiper.allowSlideNext  //  boolean 

이 속성에 false/true를 할당하여 다음 슬라이드로 슬라이드 하는 기능을 비활성화/활성화합니다.

 

swiper.allowSlidePrev  //  boolean 

이 속성에 false/true를 할당하여 이전 슬라이드로 슬라이드하는 기능을 비활성화/활성화합니다.

 

swiper.allowTouchMove  //  boolean 

이 속성에 false / true를 할당하여 마우스로 잡거나 손가락으로 터치하여(터치 스크린에서) 기능 이동 슬라이더를

비활성화/활성화합니다.

 

swiper.animating  //   boolean

스와이퍼가 전환 중인 경우 true

 

swiper.clickedIndex  //  number  

마지막으로 클릭한 슬라이드의 인덱스 번호

 

swiper.clickedSlide  //  HTMLElement 

마지막으로 클릭한 슬라이드 링크(HTMLElement)

 

swiper.el  //  HTMLElement 

슬라이더 컨테이너 HTML 요소

 

swiper.height   //   number  

컨테이너 높이

 

swiper.isBeginning   //   boolean 

슬라이더가 가장 "왼쪽"/"상단" 위치에 있으면 true

 

swiper.isEnd   //   boolean 

슬라이더가 가장 "오른쪽"/"아래" 위치에 있으면 true

 

swiper.isLocked   //   boolean 

슬라이드가 (watchOverflow에 의해) "잠겼고" 슬라이드가 잠길 수 없는 경우 true입니다.
슬라이드 수가 보기당 슬라이드 수보다 적은 경우

 

swiper.originalParams   //  SwiperOptions 

원래 초기화 매개변수가 있는 개체

 

swiper.params  //  SwiperOptions 

전달된 초기화 매개변수가 있는 객체

 

swiper.previousIndex  //   number

이전에 활성화된 슬라이드의 인덱스 번호

 

swiper.progress  //  number  

래퍼 번역의 현재 진행 상황(0에서 1로)

 

swiper.realIndex   //   number

루프 모드에서 복제된 슬라이드를 고려한 현재 활성 슬라이드의 인덱스 번호

 

swiper.slides   //   Dom7Array 

슬라이드 HTML 요소의 Dom7 배열과 유사한 컬렉션입니다.
특정 슬라이드 HTMLElement를 얻으려면 swiper.slides[1]를 사용하십시오.

 

swiper.snapGrid  //  number[]  

슬라이드 스냅 그리드

 

swiper.snapIndex    //   number

snapGrid에서 현재 스냅의 인덱스 번호

 

swiper.touches   //   object 

다음 터치 이벤트 속성이 있는 개체:

swiper.touches.startX
swiper.touches.startY
swiper.touches.currentX
swiper.touches.currentY
swiper.touches.diff

 

swiper.translate    //   number 

래퍼 번역의 현재 값

 

swiper.width   //   number 

컨테이너의 너비

 

swiper.defaults SwiperOptions 

스와이프 기본 옵션

 

swiper.extendedDefaults   //  SwiperOptions 

전역 Swiper 확장 옵션이 있는 개체

 

2. Methods

 

swiper.attachEvents() 

모든 이벤트 리스너를 다시 연결

 

swiper.changeDirection(direction, needUpdate) 

슬라이더 방향을 수평에서 수직으로 그리고 뒤로 변경합니다.

direction - 'horizontal' | 'vertical' 
- 새로운 방향. 지정하지 않으면 자동으로 반대 방향으로 변경됩니다.
needUpdate - boolean 
- swiper.update()를 호출합니다. 기본값은 참

 

swiper.changeLanguageDirection(direction)

슬라이더 언어 변경
direction - 'rtl' | 'ltr'
- 새로운 방향. 'rtl' 또는 'ltr'이어야 합니다.

 

swiper.destroy(deleteInstance, cleanStyles) 

슬라이더 인스턴스를 파괴하고 모든 이벤트 리스너를 분리합니다.

deleteInstance - boolean 
- Swiper 인스턴스를 삭제하지 않으려면 false(기본적으로 true)로 설정합니다.
cleanStyles - boolean 
- true로 설정하면(기본적으로 true) 모든 사용자 정의 스타일이 슬라이드, 래퍼 및 컨테이너에서 제거됩니다.
파괴해야 할 때 유용 스와이퍼 및 새로운 옵션 또는 다른 방향으로 다시 초기화

 

swiper.detachEvents() 

모든 이벤트 리스너 분리

 

swiper.disable()

Swiper를 비활성화합니다(활성화된 경우).
Swiper가 비활성화되면 모든 탐색 요소가 숨겨지고 이벤트 및 상호 작용에 응답하지 않습니다.

 

swiper.emit(event, args)

인스턴스에서 이벤트 발생

 

swiper.enable()

Swiper 활성화(비활성화된 경우)

 

swiper.getTranslate()

swiper 래퍼 css3 변환의 현재 값 가져오기

 

swiper.init(el)

슬라이더 초기화

 

swiper.off(event, handler)

이벤트 핸들러 제거

 

swiper.offAny(handler)

모든 이벤트에서 실행될 이벤트 리스너 제거

 

swiper.on(event, handler) 

이벤트 핸들러 추가

 

swiper.onAny(handler)

모든 이벤트에서 실행될 이벤트 리스너 추가

 

swiper.once(event, handler)

실행된 후 제거될 이벤트 핸들러 추가

 

swiper.setGrabCursor()

잡기 커서 설정

 

swiper.setProgress(progress, speed)

Swiper 번역 진행률을 설정합니다(0에서 1로).
여기서 0 - 첫 번째 슬라이드의 초기 위치(오프셋), 1 - 마지막 슬라이드의 최대 위치(오프셋)

progress - number 
- 스와이퍼 번역 진행률(0에서 1로).
speed - number 
- 전환 속도(ms).

 

swiper.setTranslate(translate) 

swiper 래퍼에 대한 사용자 정의 css3 변환의 번역 값 설정

 

swiper.slideNext(speed, runCallbacks)

다음 슬라이드로 전환을 실행합니다.

speed - number 
- 전환 속도(ms).
runCallbacks - boolean 
- false로 설정하면(기본적으로 true) 전환이 전환 이벤트를 생성하지 않습니다.

 

swiper.slidePrev(speed, runCallbacks)

이전 슬라이드로 전환을 실행합니다.

speed - number 
- 전환 속도(ms).
runCallbacks - boolean 
- false로 설정하면(기본적으로 true) 전환이 전환 이벤트를 생성하지 않습니다.

 

swiper.slideReset(speed, runCallbacks)

'속도' 매개변수와 동일한 기간 동안 스와이퍼 위치를 현재 활성 슬라이드로 재설정합니다.

speed - number 
- 전환 속도(ms).
runCallbacks - boolean 
- false로 설정하면(기본적으로 true) 전환이 전환 이벤트를 생성하지 않습니다.

 

swiper.slideTo(index, speed, runCallbacks)  

swiper 래퍼에 대한 사용자 지정 css3 변환의 변환 값 애니메이션

translate - number 
- 번역 값(px)
speed - number 
- 전환 기간(ms)
runCallbacks - boolean 
- false(기본적으로 true)로 설정하면 전환이 전환 이벤트를 생성하지 않습니다.
translateBounds - boolean 
- false로 설정하고(기본적으로 true) 전환 값이 최소 및 최대 번역 이상으로 확장될 수 있습니다.

 

swiper.unsetGrabCursor()

잡기 커서 설정 해제

 

swiper.update()

수동으로 슬라이드를 추가/제거한 후 또는 숨기거나 표시한 후 또는 Swiper로 사용자 정의 DOM 수정을 수행한 후 호출해야 합니다.
이 메서드에는 별도로 사용할 수 있는 다음 메서드의 하위 호출도 포함됩니다.

 

swiper.updateAutoHeight(speed)

'speed' 매개변수와 동일한 기간 동안 스와이퍼가 높이를 업데이트하도록 합니다(autoHeight가 활성화된 경우).

speed - number
- 전환 기간(ms)

 

swiper.updateProgress()

스와이퍼 진행 상황 다시 계산

 

swiper.updateSize()

스위퍼 컨테이너의 크기 다시 계산

 

swiper.updateSlides()

슬라이드 수와 오프셋을 다시 계산합니다.
JavaScript로 슬라이드를 추가/제거한 후 유용합니다.

 

swiper.updateSlidesClasses() 

슬라이드 및 글머리 기호에서 활성/이전/다음 클래스 업데이트

 

swiper.extendDefaults(options) 

전역 Swiper 기본값 확장

 

swiper.use(modules)

런타임에 Swiper에 모듈을 설치합니다.

 

3.  Event

 

Swiper에는 들을 수 있는 유용한 이벤트가 많이 있습니다. 이벤트는 두 가지 방법으로 할당할 수 있습니다.

Using on parameter on swiper initialization:

const swiper = new Swiper('.swiper', {
  // ...
  on: {
    init: function () {
      console.log('swiper initialized');
    },
  },
});

Using on method after swiper initialization.

const swiper = new Swiper('.swiper', {
  // ...
});
swiper.on('slideChange', function () {
  console.log('slide changed');
});

 

이벤트 핸들러 내의 이 키워드는 항상 Swipe 인스턴스를 가리킵니다.

 

activeIndexChange (swiper)

활성 인덱스 변경 시 이벤트가 발생합니다.

 

afterInit (swiper)

초기화 직후 이벤트가 발생합니다.

 

beforeDestroy (swiper)

Swiper가 파괴되기 직전에 이벤트가 시작됩니다.

beforeInit  (swiper) 

초기화 직전에 이벤트가 발생합니다.

 

beforeLoopFix (swiper)

"루프 수정" 직전에 이벤트가 시작됩니다.

 

beforeResize  (swiper)

크기 조정 핸들러 전에 이벤트가 발생합니다.

 

beforeSlideChangeStart  (swiper)

슬라이드 변경 전환이 시작되기 전에 이벤트가 시작됩니다.

 

beforeTransitionStart (swiper, speed, internal)

전환 시작 전에 이벤트가 시작됩니다.

 

breakpoint  (swiper, breakpointParams)

중단점 변경 시 이벤트가 발생합니다.

 

changeDirection (swiper)

방향 변경 시 이벤트가 발생합니다.

 

click (swiper, event)

사용자가 Swiper를 클릭/탭 하면 이벤트가 시작됩니다. touchend 이벤트를 인수로 받습니다.

 

destroy (swiper)

swiper 파괴 시 이벤트가 발생합니다.

 

doubleClick (swiper, event) 

사용자가 Swiper를 두 번 클릭/탭 하면 이벤트가 시작됩니다.

 

doubleTap (swiper, event)

사용자가 Swiper의 컨테이너를 두 번 탭하면 이벤트가 시작됩니다. touchend 이벤트를 인수로 받습니다.

 

fromEdge  (swiper)

Swiper가 시작 위치 또는 끝 위치에서 이동할 때 이벤트가 발생합니다.

 

imagesReady (swiper) 

모든 내부 이미지가 로드된 직후에 이벤트가 시작됩니다.
updateOnImagesReady도 활성화해야 합니다.

 

init  (swiper)

Swiper 초기화 직후에 실행됩니다.

 

lock  (swiper)

스위퍼가 잠겨 있을 때 이벤트가 발생합니다(watchOverflow가 활성화된 경우)

 

loopFix (swiper)

"루프 수정" 후 이벤트가 시작됩니다.

 

momentumBounce  (swiper)

모멘텀 바운스 시 이벤트가 발생합니다.

 

observerUpdate  (swiper)

옵저버가 활성화되고 DOM 돌연변이를 감지하면 이벤트가 시작됩니다.

 

orientationchange (swiper)

방향 변경 시 이벤트가 발생합니다(예: 가로 -> 세로).

 

progress  (swiper, progress)

Swiper 진행률이 변경되면 이벤트가 발생합니다.
인수로 항상 0에서 1 사이의 진행률을 수신합니다.

 

reachBeginning  (swiper)

Swiper가 시작(초기 위치)에 도달하면 이벤트가 발생합니다.

 

reachEnd  (swiper)

Swiper가 마지막 슬라이드에 도달하면 이벤트가 시작됩니다.

 

realIndexChange (swiper)

실제 인덱스 변경 시 이벤트가 발생합니다.

 

resize  (swiper)

스위퍼의 크기 조정 조작 직전에 창 크기 조정 시 이벤트가 발생합니다.

 

setTransition (swiper, transition)

스위퍼가 애니메이션을 시작할 때마다 이벤트가 시작됩니다. 현재 전환 기간(ms)을 인수로 받습니다.

 

setTranslate  (swiper, translate)

swiper의 래퍼가 위치를 변경하면 이벤트가 시작됩니다. 현재 번역 값을 인수로 받습니다.

 

slideChange (swiper)

현재 활성 슬라이드가 변경되면 이벤트가 시작됩니다.

 

slideChangeTransitionEnd  (swiper)

다른 슬라이드(다음 또는 이전)로의 애니메이션 후 이벤트가 시작됩니다.

 

slideChangeTransitionStart  (swiper)

다른 슬라이드(다음 또는 이전)로의 애니메이션 시작 시 이벤트가 발생합니다.

 

slideNextTransitionEnd  (swiper)

"slideChangeTransitionEnd"와 동일하지만 "정방향"에만 해당

 

slideNextTransitionStart  (swiper)

"slideChangeTransitionStart"와 동일하지만 "정방향"에만 해당

 

slidePrevTransitionEnd  (swiper)

"slideChangeTransitionEnd"와 동일하지만 "뒤로" 방향에만 해당

 

slidePrevTransitionStart  (swiper)

"slideChangeTransitionStart"와 동일하지만 "뒤로" 방향 전용

 

slideResetTransitionEnd (swiper)

슬라이드를 현재 슬라이드로 재설정하는 애니메이션이 끝나면 이벤트가 시작됩니다.

 

slideResetTransitionStart (swiper)

슬라이드를 현재 슬라이드로 재설정하는 애니메이션 시작 시 이벤트가 발생합니다.

 

sliderFirstMove (swiper, event) 

첫 번째 터치/드래그 이동으로 이벤트가 시작됩니다.

 

sliderMove  (swiper, event) 

사용자가 Swipe에 손가락을 대고 움직이면 이벤트가 발생합니다. 
touchmove 이벤트를 인수로 받습니다.

 

slidesGridLengthChange  (swiper)  

슬라이드 그리드가 변경되면 이벤트가 발생합니다.

 

snapGridLengthChange  (swiper) 

스냅 그리드가 변경되면 이벤트가 발생합니다.

 

snapIndexChange (swiper)

스냅 인덱스 변경 시 이벤트가 발생합니다.

 

tap (swiper, event) 

사용자가 Swiper를 클릭/탭 하면 이벤트가 시작됩니다.
touchend 이벤트를 인수로 받습니다.

 

toEdge  (swiper)

Swiper가 시작 또는 끝 위치로 이동하면 이벤트가 시작됩니다.

 

touchEnd  (swiper, event)

사용자가 Swiper를 놓으면 이벤트가 시작됩니다. touchend 이벤트를 인수로 받습니다.

 

touchMove (swiper, event)

사용자가 Swiper를 터치하고 손가락을 움직이면 이벤트가 시작됩니다.
touchmove 이벤트를 인수로 받습니다.

 

touchMoveOpposite (swiper, event) 

사용자가 방향 매개변수와 반대 방향으로 Swipe에 손가락을 대고 움직이면 이벤트가 발생합니다.
touchmove 이벤트를 인수로 받습니다.

 

touchStart  (swiper, event)

사용자가 Swiper를 터치하면 이벤트가 시작됩니다.
터치 스타트 이벤트를 인수로 받습니다.

 

transitionEnd (swiper)

전환 후 이벤트가 시작됩니다.

 

transitionStart (swiper)

전환이 시작될 때 이벤트가 시작됩니다.

 

unlock  (swiper)

스위퍼가 잠금 해제되면 이벤트가 발생합니다(watchOverflow가 활성화된 경우)

 

update  (swiper)

swiper.update() 호출 후 이벤트가 시작됩니다.