본문으로 건너뛰기
Version: 4.0.0

Flicking

class Flicking extends Component

Constructor

new Flicking(root, options)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
rootHTMLElement | stringnoFlicking을 초기화할 HTMLElement로, string 타입으로 지정시 css 선택자 문자열을 지정해야 합니다.
optionsobjectyes{}Flicking에 적용할 옵션 오브젝트

Properties

VERSION

staticreadonly

버전정보 문자열

Type: string

Flicking.VERSION;  // ex) 4.0.0

control

readonly

현재 Flicking에 활성화된 Control 인스턴스

Type: Control

Default: SnapControl

See:

camera

readonly

현재 Flicking에 활성화된 Camera 인스턴스

Type: Camera

Default: LinearCamera

See:

renderer

readonly

현재 Flicking에 활성화된 Renderer 인스턴스

Type: Renderer

Default: VanillaRenderer

See:

viewport

readonly

뷰포트 크기 정보를 담당하는 컴포넌트

Type: Viewport

See:

initialized

readonly

Flicking의 init()이 호출되었는지를 나타내는 멤버 변수.
이 값은 init()이 호출되었으면 true로 변하고, destroy()호출 이후에 다시 false로 변경됩니다.

Type: boolean

Default: false

circularEnabled

readonly

circular 옵션이 활성화되었는지 여부를 나타내는 멤버 변수.
circular 옵션은 패널의 크기의 합이 충분하지 않을 경우 비활성화됩니다.

Type: boolean

Default: false

index

readonly

currentPanel의 인덱스 번호

Type: number

Default: 0

element

readonly

root(.flicking-viewport) 엘리먼트

Type: HTMLElement

currentPanel

readonly

현재 선택된 패널

Type: Panel

See:

panels

readonly

전체 패널들의 배열

Type: Array<Panel>

See:

panelCount

readonly

전체 패널의 개수

Type: number

visiblePanels

readonly

현재 보이는 패널의 배열

Type: Array<Panel>

See:

animating

readonly

현재 애니메이션 동작 여부

Type: boolean

holding

readonly

현재 사용자가 클릭/터치중인지 여부

Type: boolean

activePlugins

readonly

현재 활성화된 플러그인 목록

Type: Array<Plugin>

align

뷰포트 내에서 패널 정렬방식을 설정하는 옵션. 카메라와 패널 개별로 옵션을 설정할 수도 있습니다

Type: ALIGN | string | number | Object

Default: "center"

PROPERTYTYPEDESCRIPTION
panelALIGN | string | number개개의 Panel에 적용할 값
cameraALIGN | string | numberCamera에 적용할 값
const possibleOptions = [
// Literal strings
"prev", "center", "next",
// % values, applied to both panel & camera
"0%", "25%", "42%",
// px values, arithmetic calculation with (+/-) is also allowed.
"0px", "100px", "50% - 25px",
// numbers, same to number + px ("0px", "100px")
0, 100, 1000,
// Setting a different value for panel & camera
{ panel: "10%", camera: "25%" }
];

possibleOptions.forEach(align => {
new Flicking("#el", { align });
});

defaultIndex

Flicking의 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

needPanelThreshold

needPanel이벤트가 발생하기 위한 뷰포트 끝으로부터의 최대 거리

Type: number

Default: 0

deceleration

사용자의 동작으로 가속도가 적용된 패널 이동 애니메이션의 감속도. 값이 높을수록 애니메이션 실행 시간이 짧아집니다

Type: number

Default: 0.0075

easing

패널 이동 애니메이션에 적용할 easing 함수. 기본값은 easeOutCubic이다

Type: function

Default: x => 1 - Math.pow(1 - x, 3)

See:

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"

moveTypecontroloptions
"snap"{@link SnapControl}
"freeScroll"{@link FreeControl}{@link FreeControlOptions}
import Flicking, { MOVE_TYPE } from "@egjs/flicking";

const flicking = new Flicking({
moveType: MOVE_TYPE.SNAP
});
const flicking = new Flicking({
// If you want more specific settings for the moveType
// [moveType, options for that moveType]
// In this case, it's ["freeScroll", FreeControlOptions]
moveType: [MOVE_TYPE.FREE_SCROLL, { stopAtEdge: true }]
});

threshold

패널 변경을 위한 이동 임계값 (단위: px). 주어진 값 이상으로 스크롤해야만 패널 변경이 가능하다.

Type: number

Default: 40

interruptable

사용자의 클릭/터치로 인해 애니메이션을 도중에 멈출 수 있도록 설정합니다.

Type: boolean

Default: true

bounce

Flicking이 최대 영역을 넘어서 갈 수 있는 최대 크기. circular=false인 경우에만 사용할 수 있습니다.
배열을 통해 prev/next 방향에 대해 서로 다른 바운스 값을 지정할 수 있습니다.
number를 통해 px값을, stirng을 통해 px 혹은 뷰포트 크기 대비 %값을 사용할 수 있습니다.
이 값을 변경시 Control#updateInput를 호출해야 합니다.

Type: string | number | Array<(string|number)>

Default: "20%"

const possibleOptions = [
// % values, relative to viewport element(".flicking-viewport")'s size
"0%", "25%", "42%",
// px values, arithmetic calculation with (+/-) is also allowed.
"0px", "100px", "50% - 25px",
// numbers, same to number + px ("0px", "100px")
0, 100, 1000
];
const flicking = new Flicking("#el", { bounce: "20%" });

flicking.bounce = "100%";
flicking.control.updateInput(); // Call this to update!

iOSEdgeSwipeThreshold

iOS Safari에서 swipe를 통한 뒤로가기/앞으로가기를 활성화하는 오른쪽 끝으로부터의 영역의 크기 (px)

Type: number

Default: 30

preventClickOnDrag

사용자가 뷰포트 영역을 1픽셀이라도 드래그했을 경우 자동으로 click 이벤트를 취소합니다

Type: boolean

Default: true

disableOnInit

Flicking init시에 disableInput()을 바로 호출합니다

Type: boolean

Default: false

renderOnlyVisible

보이는 패널만 렌더링할지 여부를 설정합니다. 패널이 많을 경우에 퍼포먼스를 크게 향상시킬 수 있습니다.

Type: boolean

Default: false

autoInit

readonly

Flicking 인스턴스를 생성할 때 자동으로 init()를 호출합니다

Type: boolean

Default: true

autoResize

Flicking의 resize 메소드를 window의 resize 이벤트 핸들러로 등록합니다.
설정시 window 창 크기 및 orientation 변경에 의해 자동으로 resize를 호출합니다.

Type: boolean

Default: true

renderExternal

readonly

프레임워크(React, Vue, Angular, ...)에서만 사용하는 옵션으로, 자동으로 설정되므로 따로 사용하실 필요 없습니다!

Type: boolean

Default: false

⚠️ This member is for internal use only.

Methods

init

async

Flicking을 초기화하고, 디폴트 인덱스로 이동합니다
이 메소드는 autoInit 옵션이 true(default)일 경우 Flicking이 생성될 때 자동으로 호출됩니다

Returns: this

Emits: Flicking#event:ready

destroy

Flicking과 하위 컴포넌트들을 초기 상태로 되돌리고, 부착된 모든 이벤트 핸들러를 제거합니다

Returns: void

prev

async

이전 패널로 이동합니다 (현재 인덱스 - 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

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
durationnumberyesoptions.duration패널 이동 애니메이션 진행 시간 (단위: ms)

Throws: FlickingError

codecondition
INDEX_OUT_OF_RANGE이전 패널이 존재하지 않을 경우
ANIMATION_ALREADY_PLAYING애니메이션이 이미 진행중인 경우
ANIMATION_INTERRUPTED사용자 입력에 의해 애니메이션이 중단된 경우
STOP_CALLED_BY_USER발생된 이벤트들 중 하나라도 stop()이 호출된 경우

next

async

다음 패널로 이동합니다 (현재 인덱스 + 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

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
durationnumberyesoptions.duration패널 이동 애니메이션 진행 시간 (단위: ms)

Throws: FlickingError

codecondition
INDEX_OUT_OF_RANGE다음 패널이 존재하지 않을 경우
ANIMATION_ALREADY_PLAYING애니메이션이 이미 진행중인 경우
ANIMATION_INTERRUPTED사용자 입력에 의해 애니메이션이 중단된 경우
STOP_CALLED_BY_USER발생된 이벤트들 중 하나라도 stop()이 호출된 경우

moveTo

async

주어진 인덱스에 해당하는 패널로 이동합니다

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

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
indexnumberno이동할 패널의 인덱스
durationnumberyesoptions.duration애니메이션 진행 시간 (단위: ms)
directionDIRECTIONyesDIRECTION.NONE이동할 방향. circular 옵션 활성화시에만 사용 가능합니다

Throws: FlickingError

codecondition
INDEX_OUT_OF_RANGE해당 인덱스를 가진 패널이 존재하지 않을 경우
ANIMATION_ALREADY_PLAYING애니메이션이 이미 진행중인 경우
ANIMATION_INTERRUPTED사용자 입력에 의해 애니메이션이 중단된 경우
STOP_CALLED_BY_USER발생된 이벤트들 중 하나라도 stop()이 호출된 경우

getPanel

주어진 인덱스에 해당하는 Panel을 반환합니다. 주어진 인덱스에 해당하는 패널이 존재하지 않을 경우 null을 반환합니다.

Returns: Panel | null

  • 주어진 인덱스에 해당하는 패널
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
indexnumberno

See:

const panel = flicking.getPanel(0);
// Which is a shorthand to...
const samePanel = flicking.panels[0];

enableInput

사용자의 입력(마우스/터치)를 활성화합니다

Returns: this

disableInput

사용자의 입력(마우스/터치)를 막습니다

Returns: this

getStatus

현재 상태를 반환합니다. 반환받은 값을 setStatus() 메소드의 인자로 지정하면 현재 상태를 복원할 수 있습니다

Returns: Partial<Status>

  • 현재 상태값 정보를 가진 객체.
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
optionsobjectyes{}Status 반환 옵션
options.indexbooleanyestrue현재 패널 인덱스를 반환값에 포함시킵니다. setStatus 호출시 자동으로 해당 인덱스로 카메라를 움직입니다
options.positionbooleanyestrue카메라의 현재 위치를 반환값에 포함시킵니다. 이 옵션은 moveTypefreeScroll일 경우에만 동작합니다
options.includePanelHTMLbooleanyes패널의 outerHTML을 반환값에 포함시킵니다
options.visiblePanelsOnlybooleanyes현재 보이는 패널(visiblePanel)의 HTML만 반환합니다. includePanelHTMLtrue일 경우에만 동작합니다.

setStatus

주어진 Status의 상태로 복원합니다

Returns: void

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
statusPartial<Status>no복원할 상태 값. getStatus() 메서드의 반환값을 지정하면 됩니다

addPlugins

플리킹에 다양한 효과를 부여할 수 있는 플러그인을 추가합니다

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
pluginsPluginno추가할 플러그인(들)

See:

removePlugins

플리킹으로부터 플러그인들을 제거합니다.

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
pluginPluginno제거 플러그인(들).

See:

resize

패널 및 뷰포트의 크기를 갱신합니다

Returns: this

Emits: Flicking#event:beforeResize, Flicking#event:afterResize

append

패널 목록의 제일 끝에 새로운 패널들을 추가합니다

Returns: Array<Panel>

  • 추가된 패널들의 배열
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
elementElementLike | Array<ElementLike>no새로운 HTMLElement, 혹은 엘리먼트의 outerHTML, 혹은 그것들의 배열

Throws: FlickingError

ERROR_CODE.NOT_ALLOWED_IN_FRAMEWORK if called on frameworks (React, Angular, Vue...)
See:

const flicking = new Flicking("#flick");
// These are possible parameters
flicking.append(document.createElement("div"));
flicking.append("\<div\>Panel\</div\>");
flicking.append(["\<div\>Panel\</div\>", document.createElement("div")]);
// Even this is possible
flicking.append("\<div\>Panel 1\</div\>\<div\>Panel 2\</div\>");

prepend

패널 목록의 제일 앞(index 0)에 새로운 패널들을 추가합니다
추가한 패널의 개수만큼 기존 패널들의 인덱스가 증가합니다.

Returns: Array<Panel>

  • 추가된 패널들의 배열
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
elementElementLike | Array<ElementLike>no새로운 HTMLElement, 혹은 엘리먼트의 outerHTML, 혹은 그것들의 배열

Throws: FlickingError

ERROR_CODE.NOT_ALLOWED_IN_FRAMEWORK if called on frameworks (React, Angular, Vue...)
See:

const flicking = new eg.Flicking("#flick");
flicking.prepend(document.createElement("div"));
flicking.prepend("\<div\>Panel\</div\>");
flicking.prepend(["\<div\>Panel\</div\>", document.createElement("div")]);
// Even this is possible
flicking.prepend("\<div\>Panel 1\</div\>\<div\>Panel 2\</div\>");

insert

주어진 인덱스에 새로운 패널들을 추가합니다
해당 인덱스보다 같거나 큰 인덱스를 가진 기존 패널들은 추가한 패널의 개수만큼 인덱스가 증가합니다.

Returns: Array<Panel>

  • 추가된 패널들의 배열
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
indexnumberno새로 패널들을 추가할 인덱스
elementElementLike | Array<ElementLike>no새로운 HTMLElement, 혹은 엘리먼트의 outerHTML, 혹은 그것들의 배열

Throws: FlickingError

ERROR_CODE.NOT_ALLOWED_IN_FRAMEWORK if called on frameworks (React, Angular, Vue...)

const flicking = new eg.Flicking("#flick");
flicking.insert(0, document.createElement("div"));
flicking.insert(2, "\<div\>Panel\</div\>");
flicking.insert(1, ["\<div\>Panel\</div\>", document.createElement("div")]);
// Even this is possible
flicking.insert(3, "\<div\>Panel 1\</div\>\<div\>Panel 2\</div\>");

remove

주어진 인덱스의 패널을 제거합니다
해당 인덱스보다 큰 인덱스를 가진 기존 패널들은 제거한 패널의 개수만큼 인덱스가 감소합니다

Returns: Array<Panel>

  • 제거된 패널들의 배열
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
indexnumberno제거할 패널의 인덱스
deleteCountnumberyes1index 이후로 제거할 패널의 개수

trigger

inherited

커스텀 이벤트를 발생시킨다

Returns: this

  • 컴포넌트 자신의 인스턴스
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventstring | ComponentEventno발생할 커스텀 이벤트의 이름 또는 ComponentEvent의 인스턴스
paramsArray<any> | $ts:...no커스텀 이벤트가 발생할 때 전달할 데이터
import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
beforeHi: ComponentEvent<{ foo: number; bar: string }>;
hi: { foo: { a: number; b: boolean } };
someEvent: (foo: number, bar: string) => void;
someOtherEvent: void; // When there's no event argument
}> {
some(){
if(this.trigger("beforeHi")){ // When event call to stop return false.
this.trigger("hi");// fire hi event.
}
}
}

const some = new Some();
some.on("beforeHi", e => {
if(condition){
e.stop(); // When event call to stop, `hi` event not call.
}
// `currentTarget` is component instance.
console.log(some === e.currentTarget); // true

typeof e.foo; // number
typeof e.bar; // string
});
some.on("hi", e => {
typeof e.foo.b; // boolean
});
// If you want to more know event design. You can see article.
// https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F

once

inherited

이벤트가 한번만 실행된다.

Returns: this

  • 컴포넌트 자신의 인스턴스
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring | $ts:...no등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트
handlerToAttachfunction | $ts:...yes등록할 이벤트의 핸들러 함수
import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
hi: ComponentEvent;
}> {
hi() {
alert("hi");
}
thing() {
this.once("hi", this.hi);
}
}

var some = new Some();
some.thing();
some.trigger(new ComponentEvent("hi"));
// fire alert("hi");
some.trigger(new ComponentEvent("hi"));
// Nothing happens

hasOn

inherited

컴포넌트에 이벤트가 등록됐는지 확인한다.

Returns: boolean

  • 이벤트 등록 여부
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestringno등록 여부를 확인할 이벤트의 이름
import Component from "@egjs/component";

class Some extends Component<{
hi: void;
}> {
some() {
this.hasOn("hi");// check hi event.
}
}

on

inherited

컴포넌트에 이벤트를 등록한다.

Returns: this

  • 컴포넌트 자신의 인스턴스
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring | $ts:...no등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트
handlerToAttachfunction | $ts:...yes등록할 이벤트의 핸들러 함수
import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
hi: void;
}> {
hi() {
console.log("hi");
}
some() {
this.on("hi",this.hi); //attach event
}
}

off

inherited

컴포넌트에 등록된 이벤트를 해제한다.
eventName이 주어지지 않았을 경우 모든 이벤트 핸들러를 제거한다.
handlerToAttach가 주어지지 않았을 경우 eventName에 해당하는 모든 이벤트 핸들러를 제거한다.

Returns: this

  • 컴포넌트 자신의 인스턴스
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring | $ts:...yes해제할 이벤트의 이름
handlerToDetachfunction | $ts:...yes해제할 이벤트의 핸들러 함수
import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
hi: void;
}> {
hi() {
console.log("hi");
}
some() {
this.off("hi",this.hi); //detach event
}
}

Events

ready

Flicking의 init()이 호출되었을 때 발생하는 이벤트

Type: object

PROPERTYTYPEDESCRIPTION
currentTargetFlicking이 이벤트를 트리거한 Flicking의 인스턴스
eventTypestring이벤트명

beforeResize

Flicking의 resize())이 호출되었을 때 발생하는 이벤트로, 패널 및 뷰포트의 크기를 업데이트하기 전에 발생합니다.
이 이벤트 단계에서 패널 및 뷰포트의 크기를 업데이트할 경우, 해당 크기가 최종적으로 반영됩니다.

Type: object

PROPERTYTYPEDESCRIPTION
currentTargetFlicking이 이벤트를 트리거한 Flicking의 인스턴스
eventTypestring이벤트명
widthnumber기존 뷰포트 너비
heightnumber기존 뷰포트 높이
elementHTMLElement뷰포트 엘리먼트

afterResize

Flicking의 resize())이 호출되었을 때 발생하는 이벤트로, 패널 및 뷰포트의 크기를 업데이트한 이후에 발생합니다.

Type: object

PROPERTYTYPEDESCRIPTION
currentTargetFlicking이 이벤트를 트리거한 Flicking의 인스턴스
eventTypestring이벤트명
widthnumber업데이트된 뷰포트 너비
heightnumber업데이트된 뷰포트 높이
prevobject기존 뷰포트 크기
prev.widthnumber기존 뷰포트 너비
prev.heightnumber기존 뷰포트 높이
sizeChangedboolean뷰포트 너비/크기가 변경되었는지 여부를 나타내는 값
elementHTMLElement뷰포트 엘리먼트

holdStart

사용자가 드래그를 시작했을 때 발생하는 이벤트

Type: object

PROPERTYTYPEDESCRIPTION
currentTargetFlicking이 이벤트를 트리거한 Flicking의 인스턴스
eventTypestring이벤트명
stopfunction이벤트 동작을 멈추고, 사용자가 드래그하지 못하도록 막습니다.
axesEventobjectAxeshold 이벤트

holdEnd

사용자가 드래그를 끝냈을 때 발생하는 이벤트

Type: object

PROPERTYTYPEDESCRIPTION
currentTargetFlicking이 이벤트를 트리거한 Flicking의 인스턴스
eventTypestring이벤트명
axesEventobjectAxesrelease 이벤트

moveStart

첫 번째 move 이벤트 직전에 단 한번 발생하는 이벤트

Type: object

PROPERTYTYPEDESCRIPTION
currentTargetFlicking이 이벤트를 트리거한 Flicking의 인스턴스
eventTypestring이벤트명
stopfunction이벤트 동작을 멈추고, 사용자가 드래그하지 못하도록 막습니다.
isTrustedboolean이벤트가 사용자 입력에 의하여 발생되었는지를 나타내는 값
holdingboolean사용자가 현재 viewport 엘리먼트를 드래그하고있는지를 나타내는 값
directionDIRECTION이전 카메라 위치 대비 이동 방향
axesEventobjectAxeschange 이벤트

move

이동시마다 발생하는 이벤트

Type: object

PROPERTYTYPEDESCRIPTION
currentTargetFlicking이 이벤트를 트리거한 Flicking의 인스턴스
eventTypestring이벤트명
stopfunction이벤트 동작을 멈추고, 사용자가 드래그하지 못하도록 막습니다.
isTrustedboolean이벤트가 사용자 입력에 의하여 발생되었는지를 나타내는 값
holdingboolean사용자가 현재 viewport 엘리먼트를 드래그하고있는지를 나타내는 값
directionDIRECTION이전 카메라 위치 대비 이동 방향
axesEventobjectAxeschange 이벤트

moveEnd

사용자 입력 중단/애니메이션 종료 등 이동이 끝났을 때 발생하는 이벤트

Type: object

PROPERTYTYPEDESCRIPTION
currentTargetFlicking이 이벤트를 트리거한 Flicking의 인스턴스
eventTypestring이벤트명
isTrustedboolean이벤트가 사용자 입력에 의하여 발생되었는지를 나타내는 값
holdingboolean사용자가 현재 viewport 엘리먼트를 드래그하고있는지를 나타내는 값
directionDIRECTION이전 카메라 위치 대비 이동 방향
axesEventobjectAxesfinish 이벤트

willChange

Flicking의 인덱스가 변경될 것임을 나타내는 이벤트. 실제 인덱스는 changed 이벤트에서 변경된다.
사용자가 입력을 마쳤을 때, 혹은 메소드를 통해 이동을 시작했을 때 발생한다.
이벤트의 stop()을 호출시 인덱스 변경 및 패널로의 이동을 막는다.

Type: object

PROPERTYTYPEDESCRIPTION
currentTargetFlicking이 이벤트를 트리거한 Flicking의 인스턴스
eventTypestring이벤트명
stopfunction이벤트 동작을 멈추고, 사용자가 드래그하지 못하도록 막습니다.
indexnumber변경할 인덱스
panelPanel인덱스 변경 이후 활성화된 패널로 설정할 패널
isTrustedboolean이벤트가 사용자 입력에 의하여 발생되었는지를 나타내는 값
directionDIRECTION현재 활성화된 패널로부터 이동하고자 하는 패널의 방향

changed

Event that fires when Flicking's index is changed.

Type: object

PROPERTYTYPEDESCRIPTION
currentTargetFlicking이 이벤트를 트리거한 Flicking의 인스턴스
eventTypestring이벤트명
indexnumber새 인덱스
panelPanel새로 선택된 패널
prevIndexnumber이전 인덱스
prevPanelPanel | null이전 패널
isTrustedboolean이벤트가 사용자 입력에 의하여 발생되었는지를 나타내는 값
directionDIRECTION현재 활성화된 패널로부터 이동하고자 하는 패널의 방향

willRestore

사용자가 드래그하여 이동한 거리가 threshold에 도달하지 못해, 기존 currentPanel로 돌아갈 것임을 나타내는 이벤트

Type: object

PROPERTYTYPEDESCRIPTION
currentTargetFlicking이 이벤트를 트리거한 Flicking의 인스턴스
eventTypestring이벤트명
stopfunction이벤트 동작을 멈추고, 사용자가 드래그하지 못하도록 막습니다
indexnumber복귀하고자 하는 패널의 인덱스
panelPanel복귀하고자 하는 패널
isTrustedboolean이벤트가 사용자 입력에 의하여 발생되었는지를 나타내는 값
directionDIRECTION이전 카메라 위치 대비 이동 방향

restored

Flicking이 currentPanel의 위치로 다시 돌아왔을 때 발생하는 이벤트

Type: object

PROPERTYTYPEDESCRIPTION
currentTargetFlicking이 이벤트를 트리거한 Flicking의 인스턴스
eventTypestring이벤트명
isTrustedboolean이벤트가 사용자 입력에 의하여 발생되었는지를 나타내는 값

select

패널이 정적으로 클릭(혹은 터치)되었을 때 발생하는 이벤트

Type: object

PROPERTYTYPEDESCRIPTION
currentTargetFlicking이 이벤트를 트리거한 Flicking의 인스턴스
eventTypestring이벤트명
indexnumber선택된 패널의 인덱스
panelPanel선택된 패널
directionDIRECTION현재 카메라 위치 대비 선택된 패널의 위치

needPanel

빈 패널 영역이 뷰포트 끝에 도달했을 때 발생하는 이벤트
needPanelThreshold를 이용해서 이벤트가 발생하는 지점을 조절할 수 있습니다

Type: object

PROPERTYTYPEDESCRIPTION
currentTargetFlicking이 이벤트를 트리거한 Flicking의 인스턴스
eventTypestring이벤트명
directionDIRECTION패널이 필요한 방향.
DIRECTION.PREV의 경우 패널이 prepend되어야 함을 의미하고, DIRECTION.NEXT는 패널이 append되어야 함을 의미한다

visibleChange

현재 뷰포트 내에서 보이는 패널이 변경되었을 때 발생되는 이벤트

Type: object

PROPERTYTYPEDESCRIPTION
currentTargetFlicking이 이벤트를 트리거한 Flicking의 인스턴스
eventTypestring이벤트명
addedArray<Panel>새로 보이는 패널의 배열
removedArray<Panel>보이지 않게 된 패널의 배열
visiblePanelsArray<Panel>현재 보이는 패널의 배열

reachEdge

카메라가 이동 가능한 영역의 끝에 도달했을 때 발생하는 이벤트

Type: object

PROPERTYTYPEDESCRIPTION
currentTargetFlicking이 이벤트를 트리거한 Flicking의 인스턴스
eventTypestring이벤트명
directionDIRECTION카메라의 위치가 이동 가능한 범위의 최대점(DIRECTION.NEXT) 혹은 최소점(DIRECTION.PREV)에 도달했는지를 나타내는 값