Flicking
control
camera
renderer
viewport
initialized
circularEnabled
index
element
currentPanel
panels
panelCount
visiblePanels
animating
holding
activePlugins
align
defaultIndex
horizontal
circular
bound
adaptive
needPanelThreshold
deceleration
easing
duration
inputType
moveType
threshold
interruptable
bounce
iOSEdgeSwipeThreshold
preventClickOnDrag
disableOnInit
renderOnlyVisible
autoInit
autoResize
renderExternal
#
ConstructorPARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
root | HTMLElement | string | no | Flicking을 초기화할 HTMLElement로, string 타입으로 지정시 css 선택자 문자열을 지정해야 합니다. | |
options | object | yes | {} | Flicking에 적용할 옵션 오브젝트 |
#
Properties#
VERSION버전정보 문자열
Type: string
#
control현재 Flicking에 활성화된 Control 인스턴스
Type: Control
Default: SnapControl
See:
#
camera현재 Flicking에 활성화된 Camera 인스턴스
Type: Camera
Default: LinearCamera
See:
#
renderer현재 Flicking에 활성화된 Renderer 인스턴스
Type: Renderer
Default: VanillaRenderer
See:
#
viewport뷰포트 크기 정보를 담당하는 컴포넌트
Type: Viewport
See:
#
initializedFlicking의 init()이 호출되었는지를 나타내는 멤버 변수.
이 값은 init()이 호출되었으면 true
로 변하고, destroy()호출 이후에 다시 false
로 변경됩니다.
Type: boolean
Default: false
#
circularEnabledcircular 옵션이 활성화되었는지 여부를 나타내는 멤버 변수.
circular 옵션은 패널의 크기의 합이 충분하지 않을 경우 비활성화됩니다.
Type: boolean
Default: false
#
indexcurrentPanel의 인덱스 번호
Type: number
Default: 0
#
elementroot(.flicking-viewport
) 엘리먼트
Type: HTMLElement
#
currentPanel현재 선택된 패널
Type: Panel
See:
#
panels전체 패널들의 배열
Type: Array<Panel>
See:
#
panelCount전체 패널의 개수
Type: number
#
visiblePanels현재 보이는 패널의 배열
Type: Array<Panel>
See:
#
animating현재 애니메이션 동작 여부
Type: boolean
#
holding현재 사용자가 클릭/터치중인지 여부
Type: boolean
#
activePlugins현재 활성화된 플러그인 목록
Type: Array<Plugin>
#
align뷰포트 내에서 패널 정렬방식을 설정하는 옵션. 카메라와 패널 개별로 옵션을 설정할 수도 있습니다
Type: ALIGN | string | number | Object
Default: "center"
PROPERTY | TYPE | DESCRIPTION |
---|---|---|
panel | ALIGN | string | number | 개개의 Panel에 적용할 값 |
camera | ALIGN | string | number | Camera에 적용할 값 |
#
defaultIndexFlicking의 init()이 호출될 때 이동할 디폴트 패널의 인덱스로, 0부터 시작하는 정수입니다
Type: number
Default: 0
#
horizontal패널 이동 방향 (true: 가로방향, false: 세로방향)
Type: boolean
Default: true
#
circular순환 모드를 활성화합니다. 순환 모드에서는 양 끝의 패널이 서로 연결되어 끊김없는 스크롤이 가능합니다.
Type: boolean
Default: false
#
bound뷰(카메라 엘리먼트)가 첫번째와 마지막 패널 밖으로 넘어가지 못하게 하여, 첫번째/마지막 패널 전/후의 빈 공간을 보이지 않도록 하는 옵션입니다
circular=false
인 경우에만 사용할 수 있습니다
Type: boolean
Default: false
#
adaptive이동한 후 뷰포트 엘리먼트의 크기를 현재 패널의 높이와 동일하게 설정합니다. horizontal=true
인 경우에만 사용할 수 있습니다.
Type: boolean
Default: false
#
needPanelThresholdneedPanel
이벤트가 발생하기 위한 뷰포트 끝으로부터의 최대 거리
Type: number
Default: 0
#
deceleration사용자의 동작으로 가속도가 적용된 패널 이동 애니메이션의 감속도. 값이 높을수록 애니메이션 실행 시간이 짧아집니다
Type: number
Default: 0.0075
#
easing패널 이동 애니메이션에 적용할 easing 함수. 기본값은 easeOutCubic
이다
Type: function
Default: x => 1 - Math.pow(1 - x, 3)
See:
- 이징 함수 Cheat Sheet http://easings.net/
#
duration디폴트 애니메이션 재생 시간 (ms)
Type: number
Default: 500
#
inputType활성화할 입력 장치 종류
Type: Array<string>
Default: ["touch", "mouse"]
See:
#
moveType사용자 입력에 의한 이동 방식. 이 값에 따라 Flicking#control의 인스턴스 타입이 결정됩니다
상수 MOVE_TYPE에 정의된 값들을 이용할 수 있습니다
Type: MOVE_TYPE | Pair.<string, object>
Default: "snap"
moveType | control | options |
---|---|---|
"snap" | {@link SnapControl} | |
"freeScroll" | {@link FreeControl} | {@link FreeControlOptions} |
#
threshold패널 변경을 위한 이동 임계값 (단위: px). 주어진 값 이상으로 스크롤해야만 패널 변경이 가능하다.
Type: number
Default: 40
#
interruptable사용자의 클릭/터치로 인해 애니메이션을 도중에 멈출 수 있도록 설정합니다.
Type: boolean
Default: true
#
bounceFlicking이 최대 영역을 넘어서 갈 수 있는 최대 크기. circular=false
인 경우에만 사용할 수 있습니다.
배열을 통해 prev/next 방향에 대해 서로 다른 바운스 값을 지정할 수 있습니다.
number
를 통해 px값을, stirng
을 통해 px 혹은 뷰포트 크기 대비 %값을 사용할 수 있습니다.
이 값을 변경시 Control#updateInput를 호출해야 합니다.
Type: string | number | Array<(string|number)>
Default: "20%"
#
iOSEdgeSwipeThresholdiOS Safari에서 swipe를 통한 뒤로가기/앞으로가기를 활성화하는 오른쪽 끝으로부터의 영역의 크기 (px)
Type: number
Default: 30
#
preventClickOnDrag사용자가 뷰포트 영역을 1픽셀이라도 드래그했을 경우 자동으로 click 이벤트를 취소합니다
Type: boolean
Default: true
#
disableOnInitFlicking init시에 disableInput()을 바로 호출합니다
Type: boolean
Default: false
#
renderOnlyVisible보이는 패널만 렌더링할지 여부를 설정합니다. 패널이 많을 경우에 퍼포먼스를 크게 향상시킬 수 있습니다.
Type: boolean
Default: false
#
autoInitFlicking 인스턴스를 생성할 때 자동으로 init()를 호출합니다
Type: boolean
Default: true
#
autoResizeFlicking의 resize 메소드를 window의 resize 이벤트 핸들러로 등록합니다.
설정시 window 창 크기 및 orientation 변경에 의해 자동으로 resize를 호출합니다.
Type: boolean
Default: true
#
renderExternal프레임워크(React, Vue, Angular, ...)에서만 사용하는 옵션으로, 자동으로 설정되므로 따로 사용하실 필요 없습니다!
Type: boolean
Default: false
#
Methods#
initFlicking을 초기화하고, 디폴트 인덱스로 이동합니다
이 메소드는 autoInit
옵션이 true(default)일 경우 Flicking이 생성될 때 자동으로 호출됩니다
Returns: this
Emits: Flicking#event:ready
#
destroyFlicking과 하위 컴포넌트들을 초기 상태로 되돌리고, 부착된 모든 이벤트 핸들러를 제거합니다
Returns: void
#
prev이전 패널로 이동합니다 (현재 인덱스 - 1)
Returns: Promise<void>
- 이전 패널 도달시에 resolve되는 Promise
Emits: Flicking#event:moveStart, Flicking#event:move, Flicking#event:moveEnd, Flicking#event:willChange, Flicking#event:changed, Flicking#event:willRestore, Flicking#event:restored, Flicking#event:needPanel, Flicking#event:visibleChange, Flicking#event:reachEdge
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
duration | number | yes | options.duration | 패널 이동 애니메이션 진행 시간 (단위: ms) |
Throws: FlickingError
code | condition |
---|---|
INDEX_OUT_OF_RANGE | 이전 패널이 존재하지 않을 경우 |
ANIMATION_ALREADY_PLAYING | 애니메이션이 이미 진행중인 경우 |
ANIMATION_INTERRUPTED | 사용자 입력에 의해 애니메이션이 중단된 경우 |
STOP_CALLED_BY_USER | 발생된 이벤트들 중 하나라도 stop() 이 호출된 경우 |
#
next다음 패널로 이동합니다 (현재 인덱스 + 1)
Returns: Promise<void>
- 다음 패널 도달시에 resolve되는 Promise
Emits: Flicking#event:moveStart, Flicking#event:move, Flicking#event:moveEnd, Flicking#event:willChange, Flicking#event:changed, Flicking#event:willRestore, Flicking#event:restored, Flicking#event:needPanel, Flicking#event:visibleChange, Flicking#event:reachEdge
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
duration | number | yes | options.duration | 패널 이동 애니메이션 진행 시간 (단위: ms) |
Throws: FlickingError
code | condition |
---|---|
INDEX_OUT_OF_RANGE | 다음 패널이 존재하지 않을 경우 |
ANIMATION_ALREADY_PLAYING | 애니메이션이 이미 진행중인 경우 |
ANIMATION_INTERRUPTED | 사용자 입력에 의해 애니메이션이 중단된 경우 |
STOP_CALLED_BY_USER | 발생된 이벤트들 중 하나라도 stop() 이 호출된 경우 |
#
moveTo주어진 인덱스에 해당하는 패널로 이동합니다
Returns: Promise<void>
- 해당 패널 도달시에 resolve되는 Promise
Emits: Flicking#event:moveStart, Flicking#event:move, Flicking#event:moveEnd, Flicking#event:willChange, Flicking#event:changed, Flicking#event:willRestore, Flicking#event:restored, Flicking#event:needPanel, Flicking#event:visibleChange, Flicking#event:reachEdge
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
index | number | no | 이동할 패널의 인덱스 | |
duration | number | yes | options.duration | 애니메이션 진행 시간 (단위: ms) |
direction | DIRECTION | yes | DIRECTION.NONE | 이동할 방향. circular 옵션 활성화시에만 사용 가능합니다 |
Throws: FlickingError
code | condition |
---|---|
INDEX_OUT_OF_RANGE | 해당 인덱스를 가진 패널이 존재하지 않을 경우 |
ANIMATION_ALREADY_PLAYING | 애니메이션이 이미 진행중인 경우 |
ANIMATION_INTERRUPTED | 사용자 입력에 의해 애니메이션이 중단된 경우 |
STOP_CALLED_BY_USER | 발생된 이벤트들 중 하나라도 stop() 이 호출된 경우 |
#
getPanel주어진 인덱스에 해당하는 Panel을 반환합니다. 주어진 인덱스에 해당하는 패널이 존재하지 않을 경우 null
을 반환합니다.
Returns: Panel | null
- 주어진 인덱스에 해당하는 패널
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
index | number | no |
See:
#
enableInput사용자의 입력(마우스/터치)를 활성화합니다
Returns: this
#
disableInput사용자의 입력(마우스/터치)를 막습니다
Returns: this
#
getStatus현재 상태를 반환합니다. 반환받은 값을 setStatus() 메소드의 인자로 지정하면 현재 상태를 복원할 수 있습니다
Returns: Partial<Status>
- 현재 상태값 정보를 가진 객체.
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
options | object | yes | {} | Status 반환 옵션 |
options.index | boolean | yes | true | 현재 패널 인덱스를 반환값에 포함시킵니다. setStatus 호출시 자동으로 해당 인덱스로 카메라를 움직입니다 |
options.position | boolean | yes | true | 카메라의 현재 위치를 반환값에 포함시킵니다. 이 옵션은 moveType이 freeScroll 일 경우에만 동작합니다 |
options.includePanelHTML | boolean | yes | 패널의 outerHTML 을 반환값에 포함시킵니다 | |
options.visiblePanelsOnly | boolean | yes | 현재 보이는 패널(visiblePanel)의 HTML만 반환합니다. includePanelHTML 이 true 일 경우에만 동작합니다. |
#
setStatus주어진 Status의 상태로 복원합니다
Returns: void
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
status | Partial<Status> | no | 복원할 상태 값. getStatus() 메서드의 반환값을 지정하면 됩니다 |
#
addPlugins플리킹에 다양한 효과를 부여할 수 있는 플러그인을 추가합니다
Returns: this
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
plugins | Plugin | no | 추가할 플러그인(들) |
See:
#
removePlugins플리킹으로부터 플러그인들을 제거합니다.
Returns: this
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
plugin | Plugin | no | 제거 플러그인(들). |
See:
#
resize패널 및 뷰포트의 크기를 갱신합니다
Returns: this
Emits: Flicking#event:beforeResize, Flicking#event:afterResize
#
append패널 목록의 제일 끝에 새로운 패널들을 추가합니다
Returns: Array<Panel>
- 추가된 패널들의 배열
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
element | ElementLike | Array<ElementLike> | no | 새로운 HTMLElement, 혹은 엘리먼트의 outerHTML, 혹은 그것들의 배열 |
Throws: FlickingError
ERROR_CODE.NOT_ALLOWED_IN_FRAMEWORK if called on frameworks (React, Angular, Vue...)
See:
#
prepend패널 목록의 제일 앞(index 0)에 새로운 패널들을 추가합니다
추가한 패널의 개수만큼 기존 패널들의 인덱스가 증가합니다.
Returns: Array<Panel>
- 추가된 패널들의 배열
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
element | ElementLike | Array<ElementLike> | no | 새로운 HTMLElement, 혹은 엘리먼트의 outerHTML, 혹은 그것들의 배열 |
Throws: FlickingError
ERROR_CODE.NOT_ALLOWED_IN_FRAMEWORK if called on frameworks (React, Angular, Vue...)
See:
#
insert주어진 인덱스에 새로운 패널들을 추가합니다
해당 인덱스보다 같거나 큰 인덱스를 가진 기존 패널들은 추가한 패널의 개수만큼 인덱스가 증가합니다.
Returns: Array<Panel>
- 추가된 패널들의 배열
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
index | number | no | 새로 패널들을 추가할 인덱스 | |
element | ElementLike | Array<ElementLike> | no | 새로운 HTMLElement, 혹은 엘리먼트의 outerHTML, 혹은 그것들의 배열 |
Throws: FlickingError
ERROR_CODE.NOT_ALLOWED_IN_FRAMEWORK if called on frameworks (React, Angular, Vue...)
#
remove주어진 인덱스의 패널을 제거합니다
해당 인덱스보다 큰 인덱스를 가진 기존 패널들은 제거한 패널의 개수만큼 인덱스가 감소합니다
Returns: Array<Panel>
- 제거된 패널들의 배열
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
index | number | no | 제거할 패널의 인덱스 | |
deleteCount | number | yes | 1 | index 이후로 제거할 패널의 개수 |
#
trigger커스텀 이벤트를 발생시킨다
Returns: this
- 컴포넌트 자신의 인스턴스
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
event | string | ComponentEvent | no | 발생할 커스텀 이벤트의 이름 또는 ComponentEvent의 인스턴스 | |
params | Array<any> | $ts:... | no | 커스텀 이벤트가 발생할 때 전달할 데이터 |
#
once이벤트가 한번만 실행된다.
Returns: this
- 컴포넌트 자신의 인스턴스
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
eventName | string | $ts:... | no | 등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트 | |
handlerToAttach | function | $ts:... | yes | 등록할 이벤트의 핸들러 함수 |
#
hasOn컴포넌트에 이벤트가 등록됐는지 확인한다.
Returns: boolean
- 이벤트 등록 여부
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
eventName | string | no | 등록 여부를 확인할 이벤트의 이름 |
#
on컴포넌트에 이벤트를 등록한다.
Returns: this
- 컴포넌트 자신의 인스턴스
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
eventName | string | $ts:... | no | 등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트 | |
handlerToAttach | function | $ts:... | yes | 등록할 이벤트의 핸들러 함수 |
#
off컴포넌트에 등록된 이벤트를 해제한다.eventName
이 주어지지 않았을 경우 모든 이벤트 핸들러를 제거한다.handlerToAttach
가 주어지지 않았을 경우 eventName
에 해당하는 모든 이벤트 핸들러를 제거한다.
Returns: this
- 컴포넌트 자신의 인스턴스
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
eventName | string | $ts:... | yes | 해제할 이벤트의 이름 | |
handlerToDetach | function | $ts:... | yes | 해제할 이벤트의 핸들러 함수 |
#
Events#
readyFlicking의 init()이 호출되었을 때 발생하는 이벤트
Type: object
PROPERTY | TYPE | DESCRIPTION |
---|---|---|
currentTarget | Flicking | 이 이벤트를 트리거한 Flicking의 인스턴스 |
eventType | string | 이벤트명 |
#
beforeResizeFlicking의 resize())이 호출되었을 때 발생하는 이벤트로, 패널 및 뷰포트의 크기를 업데이트하기 전에 발생합니다.
이 이벤트 단계에서 패널 및 뷰포트의 크기를 업데이트할 경우, 해당 크기가 최종적으로 반영됩니다.
Type: object
PROPERTY | TYPE | DESCRIPTION |
---|---|---|
currentTarget | Flicking | 이 이벤트를 트리거한 Flicking의 인스턴스 |
eventType | string | 이벤트명 |
width | number | 기존 뷰포트 너비 |
height | number | 기존 뷰포트 높이 |
element | HTMLElement | 뷰포트 엘리먼트 |
#
afterResizeFlicking의 resize())이 호출되었을 때 발생하는 이벤트로, 패널 및 뷰포트의 크기를 업데이트한 이후에 발생합니다.
Type: object
PROPERTY | TYPE | DESCRIPTION |
---|---|---|
currentTarget | Flicking | 이 이벤트를 트리거한 Flicking의 인스턴스 |
eventType | string | 이벤트명 |
width | number | 업데이트된 뷰포트 너비 |
height | number | 업데이트된 뷰포트 높이 |
prev | object | 기존 뷰포트 크기 |
prev.width | number | 기존 뷰포트 너비 |
prev.height | number | 기존 뷰포트 높이 |
sizeChanged | boolean | 뷰포트 너비/크기가 변경되었는지 여부를 나타내는 값 |
element | HTMLElement | 뷰포트 엘리먼트 |
#
holdStart사용자가 드래그를 시작했을 때 발생하는 이벤트
Type: object
PROPERTY | TYPE | DESCRIPTION |
---|---|---|
currentTarget | Flicking | 이 이벤트를 트리거한 Flicking의 인스턴스 |
eventType | string | 이벤트명 |
stop | function | 이벤트 동작을 멈추고, 사용자가 드래그하지 못하도록 막습니다. |
axesEvent | object | Axes의 hold 이벤트 |
#
holdEnd사용자가 드래그를 끝냈을 때 발생하는 이벤트
Type: object
PROPERTY | TYPE | DESCRIPTION |
---|---|---|
currentTarget | Flicking | 이 이벤트를 트리거한 Flicking의 인스턴스 |
eventType | string | 이벤트명 |
axesEvent | object | Axes의 release 이벤트 |
#
moveStart첫 번째 move 이벤트 직전에 단 한번 발생하는 이벤트
Type: object
PROPERTY | TYPE | DESCRIPTION |
---|---|---|
currentTarget | Flicking | 이 이벤트를 트리거한 Flicking의 인스턴스 |
eventType | string | 이벤트명 |
stop | function | 이벤트 동작을 멈추고, 사용자가 드래그하지 못하도록 막습니다. |
isTrusted | boolean | 이벤트가 사용자 입력에 의하여 발생되었는지를 나타내는 값 |
holding | boolean | 사용자가 현재 viewport 엘리먼트를 드래그하고있는지를 나타내는 값 |
direction | DIRECTION | 이전 카메라 위치 대비 이동 방향 |
axesEvent | object | Axes의 change 이벤트 |
#
move이동시마다 발생하는 이벤트
Type: object
PROPERTY | TYPE | DESCRIPTION |
---|---|---|
currentTarget | Flicking | 이 이벤트를 트리거한 Flicking의 인스턴스 |
eventType | string | 이벤트명 |
stop | function | 이벤트 동작을 멈추고, 사용자가 드래그하지 못하도록 막습니다. |
isTrusted | boolean | 이벤트가 사용자 입력에 의하여 발생되었는지를 나타내는 값 |
holding | boolean | 사용자가 현재 viewport 엘리먼트를 드래그하고있는지를 나타내는 값 |
direction | DIRECTION | 이전 카메라 위치 대비 이동 방향 |
axesEvent | object | Axes의 change 이벤트 |
#
moveEnd사용자 입력 중단/애니메이션 종료 등 이동이 끝났을 때 발생하는 이벤트
Type: object
PROPERTY | TYPE | DESCRIPTION |
---|---|---|
currentTarget | Flicking | 이 이벤트를 트리거한 Flicking의 인스턴스 |
eventType | string | 이벤트명 |
isTrusted | boolean | 이벤트가 사용자 입력에 의하여 발생되었는지를 나타내는 값 |
holding | boolean | 사용자가 현재 viewport 엘리먼트를 드래그하고있는지를 나타내는 값 |
direction | DIRECTION | 이전 카메라 위치 대비 이동 방향 |
axesEvent | object | Axes의 finish 이벤트 |
#
willChangeFlicking의 인덱스가 변경될 것임을 나타내는 이벤트. 실제 인덱스는 changed 이벤트에서 변경된다.
사용자가 입력을 마쳤을 때, 혹은 메소드를 통해 이동을 시작했을 때 발생한다.
이벤트의 stop()을 호출시 인덱스 변경 및 패널로의 이동을 막는다.
Type: object
PROPERTY | TYPE | DESCRIPTION |
---|---|---|
currentTarget | Flicking | 이 이벤트를 트리거한 Flicking의 인스턴스 |
eventType | string | 이벤트명 |
stop | function | 이벤트 동작을 멈추고, 사용자가 드래그하지 못하도록 막습니다. |
index | number | 변경할 인덱스 |
panel | Panel | 인덱스 변경 이후 활성화된 패널로 설정할 패널 |
isTrusted | boolean | 이벤트가 사용자 입력에 의하여 발생되었는지를 나타내는 값 |
direction | DIRECTION | 현재 활성화된 패널로부터 이동하고자 하는 패널의 방향 |
#
changedEvent that fires when Flicking's index is changed.
Type: object
PROPERTY | TYPE | DESCRIPTION |
---|---|---|
currentTarget | Flicking | 이 이벤트를 트리거한 Flicking의 인스턴스 |
eventType | string | 이벤트명 |
index | number | 새 인덱스 |
panel | Panel | 새로 선택된 패널 |
prevIndex | number | 이전 인덱스 |
prevPanel | Panel | null | 이전 패널 |
isTrusted | boolean | 이벤트가 사용자 입력에 의하여 발생되었는지를 나타내는 값 |
direction | DIRECTION | 현재 활성화된 패널로부터 이동하고자 하는 패널의 방향 |
#
willRestore사용자가 드래그하여 이동한 거리가 threshold에 도달하지 못해, 기존 currentPanel로 돌아갈 것임을 나타내는 이벤트
Type: object
PROPERTY | TYPE | DESCRIPTION |
---|---|---|
currentTarget | Flicking | 이 이벤트를 트리거한 Flicking의 인스턴스 |
eventType | string | 이벤트명 |
stop | function | 이벤트 동작을 멈추고, 사용자가 드래그하지 못하도록 막습니다 |
index | number | 복귀하고자 하는 패널의 인덱스 |
panel | Panel | 복귀하고자 하는 패널 |
isTrusted | boolean | 이벤트가 사용자 입력에 의하여 발생되었는지를 나타내는 값 |
direction | DIRECTION | 이전 카메라 위치 대비 이동 방향 |
#
restoredFlicking이 currentPanel의 위치로 다시 돌아왔을 때 발생하는 이벤트
Type: object
PROPERTY | TYPE | DESCRIPTION |
---|---|---|
currentTarget | Flicking | 이 이벤트를 트리거한 Flicking의 인스턴스 |
eventType | string | 이벤트명 |
isTrusted | boolean | 이벤트가 사용자 입력에 의하여 발생되었는지를 나타내는 값 |
#
select패널이 정적으로 클릭(혹은 터치)되었을 때 발생하는 이벤트
Type: object
PROPERTY | TYPE | DESCRIPTION |
---|---|---|
currentTarget | Flicking | 이 이벤트를 트리거한 Flicking의 인스턴스 |
eventType | string | 이벤트명 |
index | number | 선택된 패널의 인덱스 |
panel | Panel | 선택된 패널 |
direction | DIRECTION | 현재 카메라 위치 대비 선택된 패널의 위치 |
#
needPanel빈 패널 영역이 뷰포트 끝에 도달했을 때 발생하는 이벤트
needPanelThreshold를 이용해서 이벤트가 발생하는 지점을 조절할 수 있습니다
Type: object
PROPERTY | TYPE | DESCRIPTION |
---|---|---|
currentTarget | Flicking | 이 이벤트를 트리거한 Flicking의 인스턴스 |
eventType | string | 이벤트명 |
direction | DIRECTION | 패널이 필요한 방향. DIRECTION.PREV 의 경우 패널이 prepend되어야 함을 의미하고, DIRECTION.NEXT 는 패널이 append되어야 함을 의미한다 |
#
visibleChange현재 뷰포트 내에서 보이는 패널이 변경되었을 때 발생되는 이벤트
Type: object
PROPERTY | TYPE | DESCRIPTION |
---|---|---|
currentTarget | Flicking | 이 이벤트를 트리거한 Flicking의 인스턴스 |
eventType | string | 이벤트명 |
added | Array<Panel> | 새로 보이는 패널의 배열 |
removed | Array<Panel> | 보이지 않게 된 패널의 배열 |
visiblePanels | Array<Panel> | 현재 보이는 패널의 배열 |
#
reachEdge카메라가 이동 가능한 영역의 끝에 도달했을 때 발생하는 이벤트
Type: object
PROPERTY | TYPE | DESCRIPTION |
---|---|---|
currentTarget | Flicking | 이 이벤트를 트리거한 Flicking의 인스턴스 |
eventType | string | 이벤트명 |
direction | DIRECTION | 카메라의 위치가 이동 가능한 범위의 최대점(DIRECTION.NEXT) 혹은 최소점(DIRECTION.PREV)에 도달했는지를 나타내는 값 |
#
panelChange패널 추가/제거시에 발생하는 이벤트
Type: object
PROPERTY | TYPE | DESCRIPTION |
---|---|---|
currentTarget | Flicking | 이 이벤트를 트리거한 Flicking의 인스턴스 |
eventType | string | 이벤트명 |
added | Array<Panel> | 새로 추가된 패널의 배열 |
removed | Array<Panel> | 제거된 패널의 배열 |