본문으로 건너뛰기
Version: 4.11.2

Flicking

class Flicking extends Component

constructor

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

Throws: FlickingError



|code|조건|
|---|---|
|[WRONG_TYPE](ERROR_CODE)|루트 엘리먼트가 string이나 HTMLElement가 아닐 경우|
|[ELEMENT_NOT_FOUND](ERROR_CODE)|주어진 CSS selector로 엘리먼트를 찾지 못했을 경우|

import Flicking from "@egjs/flicking";

// Creating new instance of Flicking with HTMLElement
const flicking = new Flicking(document.querySelector(".flicking-viewport"), { circular: true });

// Creating new instance of Flicking with CSS selector
const flicking2 = new Flicking(".flicking-viewport", { circular: true });

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:

  • Camera
  • LinearCamera
  • BoundCamera
  • CircularCamera

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

virtualEnabled

readonly

virtual 옵션이 활성화되었는지 여부를 나타내는 멤버 변수.
virtual 옵션은 panelsPerView 옵션의 값이 0보다 같거나 작으면 비활성화됩니다.

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에 적용할 값

See:

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

See:

horizontal

패널 이동 방향 (true: 가로방향, false: 세로방향)

Type: boolean

Default: true

See:

circular

순환 모드를 활성화합니다. 순환 모드에서는 양 끝의 패널이 서로 연결되어 끊김없는 스크롤이 가능합니다.

Type: boolean

Default: false

See:

circularFallback

순환 모드 사용 불가능시 사용할 패널 조작 범위 설정 방식을 변경합니다.
"linear" 사용시 시점이 첫번째 엘리먼트 위에서부터 마지막 엘리먼트 위까지 움직일 수 있도록 설정합니다.
"bound" 사용시 시점이 첫번째 엘리먼트와 마지막 엘리먼트의 끝과 끝 사이에서 움직일 수 있도록 설정합니다.

Type: string

Default: "linear"

See:

bound

뷰(카메라 엘리먼트)가 첫번째와 마지막 패널 밖으로 넘어가지 못하게 하여, 첫번째/마지막 패널 전/후의 빈 공간을 보이지 않도록 하는 옵션입니다
circular=false인 경우에만 사용할 수 있습니다

Type: boolean

Default: false

See:

adaptive

이동한 후 뷰포트 엘리먼트의 크기를 현재 패널의 높이와 동일하게 설정합니다. horizontal=true인 경우에만 사용할 수 있습니다.

Type: boolean

Default: false

See:

panelsPerView

한 화면에 보이는 패널의 개수. 이 옵션을 활성화할 경우 패널의 크기를 강제로 재조정합니다

Type: number

Default: -1

See:

noPanelStyleOverride

이 옵션을 활성화할 경우, Flicking#panelsPerView 옵션이 활성화되었을 때 패널의 width/height 스타일을 변경하지 않도록 설정합니다.
모든 패널들의 크기를 직접 관리하고 있을 경우, 이 옵션을 활성화하면 성능면에서 유리할 수 있습니다

Type: boolean

Default: false

resizeOnContentsReady

이 옵션을 활성화할 경우, Flicking 패널 내부의 이미지/비디오들이 로드되었을 때 자동으로 Flicking#resize를 호출합니다.
이 동작은 Flicking 내부에 로드 전/후로 크기가 변하는 콘텐츠를 포함하고 있을 때 유용하게 사용하실 수 있습니다.

Type: boolean

Default: false

See:

nested

Flicking 내부에 Flicking이 배치될 때 하위 Flicking에서 이 옵션을 활성화하면 하위 Flicking이 첫/마지막 패널에 도달한 뒤부터 같은 방향으로 상위 Flicking이 움직입니다.
만약 상위 Flicking과 하위 Flicking이 서로 다른 horizontal 옵션을 가지고 있다면 이 옵션을 설정할 필요가 없습니다.

Type: boolean

Default: false

See:

needPanelThreshold

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

Type: number

Default: 0

See:

preventEventsBeforeInit

활성화할 경우 초기화시 ready 이벤트 이전의 이벤트가 발생하지 않습니다.

Type: boolean

Default: true

See:

deceleration

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

Type: number

Default: 0.0075

See:

easing

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

Type: function

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

See:

duration

디폴트 애니메이션 재생 시간 (ms)

Type: number

Default: 500

See:

inputType

활성화할 입력 장치 종류

Type: Array<string>

Default: ["touch", "mouse"]

See:

moveType

사용자 입력에 의한 이동 방식. 이 값에 따라 Flicking#control의 인스턴스 타입이 결정됩니다
상수 MOVE_TYPE에 정의된 값들을 이용할 수 있습니다

Type: MOVE_TYPE | Pair.<string, object>

Default: "snap"

See:

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

See:

interruptable

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

Type: boolean

Default: true

See:

bounce

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

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

Default: "20%"

See:

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

See:

preventClickOnDrag

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

Type: boolean

Default: true

See:

preventDefaultOnDrag

사용자가 드래그를 시작할 때 preventDefault 실행 여부

Type: boolean

Default: false

See:

disableOnInit

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

Type: boolean

Default: false

See:

changeOnHold

애니메이션 도중 마우스/터치 입력시 현재 활성화된 패널의 인덱스를 변경합니다.
willChange/willRestore 이벤트의 index값이 새로운 인덱스로 사용될 것입니다.

Type: boolean

Default: false

See:

renderOnlyVisible

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

Type: boolean

Default: false

See:

virtual

이 옵션을 활성화할 경우 패널 엘리먼트의 개수를 panelsPerView + 1 개로 고정함으로써, 메모리 사용량을 줄일 수 있습니다.
panelsPerView 옵션과 함께 사용되어야만 합니다.
Flicking 초기화 이후에, 이 프로퍼티는 렌더링하는 패널의 개수를 추가/제거하기 위해 사용될 수 있습니다.

Type: VirtualManager

PROPERTYTYPEDEFAULTDESCRIPTION
renderPanelfunction패널 엘리먼트의 innerHTML을 렌더링하는 함수
initialPanelCountnumber최초로 렌더링할 패널의 개수
cachebooleanfalse렌더링된 패널의 innerHTML 정보를 캐시할지 여부
panelClassstring"flicking-panel"렌더링되는 패널 엘리먼트에 적용될 클래스 이름

See:

import Flicking, { VirtualPanel } from "@egjs/flicking";

const flicking = new Flicking("#some_el", {
panelsPerView: 3,
virtual: {
renderPanel: (panel: VirtualPanel, index: number) => `Panel ${index}`,
initialPanelCount: 100
}
});

// Add 100 virtual panels (at the end)
flicking.virtual.append(100);

// Remove 100 virtual panels from 0 to 100
flicking.virtual.remove(0, 100);

autoInit

readonly

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

Type: boolean

Default: true

See:

autoResize

뷰포트 엘리먼트(.flicking-viewport)의 크기 변경시 resize() 메소드를 자동으로 호출할지 여부를 설정합니다

Type: boolean

Default: true

useResizeObserver

autoResize 옵션 사용시 ResizeObserver의 이벤트를 Window객체의 resize 이벤트 대신 수신할지 여부를 설정합니다

Type: boolean

Default: true

See:

resizeDebounce

autoResize 설정시에 호출되는 크기 재계산을 주어진 시간(단위: ms)만큼 지연시킵니다.
지연시키는 도중 크기가 다시 변경되었을 경우, 이전 것을 취소하고 주어진 시간만큼 다시 지연시킵니다.
이를 통해 resize가 너무 많이 호출되는 것을 방지하여 성능을 향상시킬 수 있습니다.

Type: number

Default: 0

See:

maxResizeDebounce

resizeDebounce 사용시에 크기 재계산이 지연되는 최대 시간을 지정합니다. (단위: ms)
이를 통해, 적어도 (n)ms에 한번은 크기 재계산을 수행하는 것을 보장할 수 있습니다.

Type: number

Default: 100

See:

useFractionalSize

이 옵션을 활성화할 경우, Flicking은 내부의 모든 크기를 getBoundingClientRect를 이용하여 계산합니다.
이를 통해, 패널 크기에 소수점을 포함할 경우에 발생할 수 있는 일부 1px 오프셋 이슈를 해결 가능합니다.
모든 크기는 CSS transform이 엘리먼트에 적용되기 이전의 크기를 사용할 것입니다.

Type: boolean

Default: false

See:

externalRenderer

readonly

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

Default: null

renderExternal

readonly

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

Default: null

Methods

init

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

Returns: Promise<void>

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
durationnumber✔️options.duration패널 이동 애니메이션 진행 시간 (단위: ms)

Throws: FlickingError



|code|condition|
|---|---|
|[INDEX_OUT_OF_RANGE](ERROR_CODE)|이전 패널이 존재하지 않을 경우|
|[ANIMATION_ALREADY_PLAYING](ERROR_CODE)|애니메이션이 이미 진행중인 경우|
|[ANIMATION_INTERRUPTED](ERROR_CODE)|사용자 입력에 의해 애니메이션이 중단된 경우|
|[STOP_CALLED_BY_USER](ERROR_CODE)|발생된 이벤트들 중 하나라도 `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
durationnumber✔️options.duration패널 이동 애니메이션 진행 시간 (단위: ms)

Throws: FlickingError



|code|condition|
|---|---|
|[INDEX_OUT_OF_RANGE](ERROR_CODE)|다음 패널이 존재하지 않을 경우|
|[ANIMATION_ALREADY_PLAYING](ERROR_CODE)|애니메이션이 이미 진행중인 경우|
|[ANIMATION_INTERRUPTED](ERROR_CODE)|사용자 입력에 의해 애니메이션이 중단된 경우|
|[STOP_CALLED_BY_USER](ERROR_CODE)|발생된 이벤트들 중 하나라도 `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
indexnumber이동할 패널의 인덱스
durationnumber✔️options.duration애니메이션 진행 시간 (단위: ms)
directionDIRECTION✔️DIRECTION.NONE이동할 방향. circular 옵션 활성화시에만 사용 가능합니다

Throws: FlickingError



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

updateAnimation

재생 중인 애니메이션의 목적지와 재생 시간을 변경합니다

Returns: void

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

Throws: FlickingError

INDEX_OUT_OF_RANGE 해당 인덱스를 가진 패널이 존재하지 않을 경우

stopAnimation

재생 중인 애니메이션을 중단시킵니다

Returns: void

Emits: Flicking#event:moveEnd

getPanel

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

Returns: Panel | null

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

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: Status

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

setStatus

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

Returns: void

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

addPlugins

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

Returns: this

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

See:

removePlugins

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

Returns: this

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

See:

resize

async

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

Returns: this

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

append

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

Returns: Array<Panel>

  • 추가된 패널들의 배열
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
elementElementLike | Array<ElementLike>새로운 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>새로운 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
indexnumber새로 패널들을 추가할 인덱스
elementElementLike | Array<ElementLike>새로운 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
indexnumber제거할 패널의 인덱스
deleteCountnumber✔️1index 이후로 제거할 패널의 개수

trigger

inherited

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

Returns: this

  • 컴포넌트 자신의 인스턴스
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventstring | ComponentEvent발생할 커스텀 이벤트의 이름 또는 ComponentEvent의 인스턴스
paramsArray<any> | $ts:...커스텀 이벤트가 발생할 때 전달할 데이터
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:...등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트
handlerToAttachfunction | $ts:...✔️등록할 이벤트의 핸들러 함수
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
eventNamestring등록 여부를 확인할 이벤트의 이름
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:...등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트
handlerToAttachfunction | $ts:...✔️등록할 이벤트의 핸들러 함수
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:...✔️해제할 이벤트의 이름
handlerToDetachfunction | $ts:...✔️해제할 이벤트의 핸들러 함수
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)에 도달했는지를 나타내는 값

panelChange

패널 추가/제거시에 발생하는 이벤트

Type: object

PROPERTYTYPEDESCRIPTION
currentTargetFlicking이 이벤트를 트리거한 Flicking의 인스턴스
eventTypestring이벤트명
addedArray<Panel>새로 추가된 패널의 배열
removedArray<Panel>제거된 패널의 배열