Class: Flicking

Extends

• eg.Component

Requires

• eg.Component
• eg.Axes

Members

staticeg.Flicking.DIRECTIONobject

Direction constant - "PREV" or "NEXT"

방향 상수 - "PREV" 또는 "NEXT"

Properties:

Name	Type	Description
PREV	"PREV"	Prev direction from current hanger position. It's left(←️) direction when horizontal: true. Or, up(↑️) direction when horizontal: false. 현재 행어를 기준으로 이전 방향. horizontal: true일 경우 왼쪽(←️) 방향. horizontal: false일 경우 위쪽(↑️)방향이다.
NEXT	"NEXT"	Next direction from current hanger position. It's right(→) direction when horizontal: true. Or, down(↓️) direction when horizontal: false. 현재 행어를 기준으로 다음 방향. horizontal: true일 경우 오른쪽(→) 방향. horizontal: false일 경우 아래쪽(↓️)방향이다.

Example

eg.Flicking.DIRECTION.PREV; // "PREV"

eg.Flicking.DIRECTION.NEXT; // "NEXT"

staticeg.Flicking.EVENTSobject

Event type object with event name strings.

이벤트 이름 문자열들을 담은 객체

Properties:

Name	Type	Description
HOLD_START	"holdStart"	holdStart event holdStart 이벤트
HOLD_END	"holdEnd"	holdEnd event holdEnd 이벤트
MOVE_START	"moveStart"	moveStart event moveStart 이벤트
MOVE	"move"	move event move 이벤트
MOVE_END	"moveEnd"	moveEnd event moveEnd 이벤트
CHANGE	"change"	change event change 이벤트
RESTORE	"restore"	restore event restore 이벤트
SELECT	"select"	select event select 이벤트
NEED_PANEL	"needPanel"	needPanel event needPanel 이벤트

Example

eg.Flicking.EVENTS.MOVE_START; // "MOVE_START"

staticeg.Flicking.VERSIONstring

Version info string

버전정보 문자열

Example

eg.Flicking.VERSION;  // ex) 3.0.0

Methods

addPlugins(plugins){eg.Flicking}

Flicking.ts, line 482

Add plugins that can have different effects on Flicking.

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

• plugins
  Type: Plugin | Plugin[]

  The plugin(s) to add.

  추가할 플러그인(들).

Returns:

Type	Description
eg.Flicking	The instance itself. 인스턴스 자기 자신.

append(element){FlickingPanel[]}

Flicking.ts, line 600

Add new panels at the end of panels.

제일 끝에 새로운 패널을 추가한다.

• element
  Type: ElementLike | ElementLike[]

  Either HTMLElement, HTML string, or array of them.
  It can be also HTML string of multiple elements with same depth.

  HTMLElement 혹은 HTML 문자열, 혹은 그것들의 배열도 가능하다.
  또한, 같은 depth의 여러 개의 엘리먼트에 해당하는 HTML 문자열도 가능하다.

Returns:

Type	Description
FlickingPanel[]	Array of appended panels. 추가된 패널들의 배열

Example

// Suppose there were no panels at initialization

const flicking = new eg.Flicking("#flick");

flicking.append(document.createElement("div")); // Appended at index 0

flicking.append("<div>Panel</div>"); // Appended at index 1

flicking.append(["<div>Panel</div>", document.createElement("div")]); // Appended at index 2, 3

// Even this is possible

flicking.append("<div>Panel 1</div><div>Panel 2</div>"); // Appended at index 4, 5

destroy(option){void}

Flicking.ts, line 506

Return the reference element and all its children to the state they were in before the instance was created. Remove all attached event handlers. Specify null for all attributes of the instance (including inherited attributes).

기준 요소와 그 하위 패널들을 인스턴스 생성전의 상태로 되돌린다. 부착된 모든 이벤트 핸들러를 탈거한다. 인스턴스의 모든 속성(상속받은 속성포함)에 null을 지정한다.

• option (default: {}) optional
  Type: Partial<DestroyOption>

Returns:

Type	Description
void

Example

const flick = new eg.Flicking("#flick");

flick.destroy();

console.log(flick.moveTo); // null

disableInput(){eg.Flicking}

Flicking.ts, line 436

Block input devices.

입력 장치로부터의 입력을 막는다.

Returns:

Type	Description
eg.Flicking	The instance itself. 인스턴스 자기 자신.

enableInput(){eg.Flicking}

Flicking.ts, line 425

Unblock input devices.

막았던 입력 장치로부터의 입력을 푼다.

Returns:

Type	Description
eg.Flicking	The instance itself. 인스턴스 자기 자신.

getAllPanels(includeClone){FlickingPanel[]}

Flicking.ts, line 350

Return all panels.

모든 패널들을 반환한다.

• includeClone optional
  Type: boolean

  Should include cloned panels or not.

  복사된 패널들을 포함할지의 여부.

Returns:

Type	Description
FlickingPanel[]	All panels. 모든 패널들.

getCloneCount(){number}

Flicking.ts, line 384

Return how many groups of clones are created.

몇 개의 클론 그룹이 생성되었는지를 반환한다.

Returns:

Type	Description
number	Length of cloned panel groups. 클론된 패널 그룹의 개수

getCurrentPanel(){FlickingPanel | null}

Flicking.ts, line 323

Return current panel. null if no panel exists.

현재 패널을 반환한다. 패널이 하나도 없을 경우 null을 반환한다.

Returns:

Type	Description
FlickingPanel | null	Current panel. 현재 패널.

getElement(){HTMLElement}

Flicking.ts, line 305

Return the wrapper element user provided in constructor.

사용자가 생성자에서 제공한 래퍼 엘리먼트를 반환한다.

Returns:

Type	Description
HTMLElement	Wrapper element user provided. 사용자가 제공한 래퍼 엘리먼트.

getIndex(){number}

Flicking.ts, line 296

Return index of the current panel. -1 if no panel exists.

현재 패널의 인덱스 번호를 반환한다. 패널이 하나도 없을 경우 -1을 반환한다.

Returns:

Type	Description
number	Current panel's index, zero-based integer. 현재 패널의 인덱스 번호. 0부터 시작하는 정수.

getLastIndex(){number}

Flicking.ts, line 394

Get maximum panel index for infinite mode.

infinite 모드에서 적용되는 추가 가능한 패널의 최대 인덱스 값을 반환한다.

Returns:

Type	Description
number	Maximum index of panel that can be added. 최대 추가 가능한 패널의 인덱스.

See:

• eg.Flicking.FlickingOptions
  eg.Flicking.FlickingOptions

getPanel(index){FlickingPanel | null}

Flicking.ts, line 336

Return the panel of given index. null if it doesn't exists.

주어진 인덱스에 해당하는 패널을 반환한다. 해당 패널이 존재하지 않을 시 null이다.

• index
  Type: number

Returns:

Type	Description
FlickingPanel | null	Panel of given index. 주어진 인덱스에 해당하는 패널.

getPanelCount(){number}

Flicking.ts, line 375

Return length of original panels.

원본 패널의 개수를 반환한다.

Returns:

Type	Description
number	Length of original panels. 원본 패널의 개수

getSize(){number}

Flicking.ts, line 314

Return the viewport element's size.

뷰포트 엘리먼트의 크기를 반환한다.

Returns:

Type	Description
number	Width if horizontal: true, height if horizontal: false Width if horizontal: true, height if horizontal: false

getStatus(){FlickingStatus}

Flicking.ts, line 447

Get current flicking status. You can restore current state by giving returned value to setStatus().

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

Returns:

Type	Description
FlickingStatus	An object with current status value information. 현재 상태값 정보를 가진 객체.

getVisiblePanels(){FlickingPanel[]}

Flicking.ts, line 366

Return the panels currently shown in viewport area.

현재 뷰포트 영역에서 보여지고 있는 패널들을 반환한다.

Returns:

Type	Description
FlickingPanel[]	Panels currently shown in viewport area. 현재 뷰포트 영역에 보여지는 패널들

inherited hasOn(eventName){boolean}

Component.ts, line 247

Checks whether an event has been attached to a component.

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

• eventName
  Type: string

  The name of the event to be attached

  등록 여부를 확인할 이벤트의 이름

Returns:

Type	Description
boolean	Indicates whether the event is attached. 이벤트 등록 여부

Example

class Some extends eg.Component {
  some() {
    this.hasOn("hi");// check hi event.
  }
}

isPlaying(){boolean}

Flicking.ts, line 416

Return panel movement animation.

현재 패널 이동 애니메이션이 진행 중인지를 반환한다.

Returns:

Type	Description
boolean	Is animating or not. 애니메이션 진행 여부.

moveTo(index, duration){eg.Flicking}

Flicking.ts, line 231

Move to the panel of given index.

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

• index
  Type: number

  The index number of the panel to move.

  이동할 패널의 인덱스 번호.

• duration optional
  Type: number

  [duration=options.duration] Duration of the panel movement.(unit: ms)

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

Returns:

Type	Description
eg.Flicking	The instance itself. 인스턴스 자기 자신.

next(duration){eg.Flicking}

Flicking.ts, line 210

Move to the next panel if it exists.

다음 패널이 존재시 해당 패널로 이동한다.

• duration (default: options.duration) optional
  Type: number

  Duration of the panel movement animation(unit: ms).

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

Returns:

Type	Description
eg.Flicking	The instance itself. 인스턴스 자기 자신.

inherited off(eventName, handlerToDetach){this}

Component.ts, line 315

Detaches an event from the component.

컴포넌트에 등록된 이벤트를 해제한다

• eventName optional
  Type: string | ...

  The name of the event to be detached

  해제할 이벤트의 이름

• handlerToDetach optional
  Type: function | ...

  The handler function of the event to be detached

  해제할 이벤트의 핸들러 함수

Returns:

Type	Description
this	An instance of a component itself 컴포넌트 자신의 인스턴스

Example

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

inherited on(eventName, handlerToAttach){this}

Component.ts, line 271

Attaches an event to a component.

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

• eventName
  Type: string | ...

  The name of the event to be attached

  등록할 이벤트의 이름

• handlerToAttach optional
  Type: function | ...

  The handler function of the event to be attached

  등록할 이벤트의 핸들러 함수

Returns:

Type	Description
this	An instance of a component itself 컴포넌트 자신의 인스턴스

Example

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

inherited once(eventName, handlerToAttach){this}

Component.ts, line 213

Executed event just one time.

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

• eventName
  Type: string | ...

  The name of the event to be attached

  등록할 이벤트의 이름

• handlerToAttach optional
  Type: function | ...

  The handler function of the event to be attached

  등록할 이벤트의 핸들러 함수

Returns:

Type	Description
this	An instance of a component itself 컴포넌트 자신의 인스턴스

Example

class Some extends eg.Component {
hi() {
  alert("hi");
}
thing() {
  this.once("hi", this.hi);
}

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

prepend(element){FlickingPanel[]}

Flicking.ts, line 574

Add new panels at the beginning of panels.

제일 앞에 새로운 패널을 추가한다.

• element
  Type: ElementLike | ElementLike[]

  Either HTMLElement, HTML string, or array of them.
  It can be also HTML string of multiple elements with same depth.

  HTMLElement 혹은 HTML 문자열, 혹은 그것들의 배열도 가능하다.
  또한, 같은 depth의 여러 개의 엘리먼트에 해당하는 HTML 문자열도 가능하다.

Returns:

Type	Description
FlickingPanel[]	Array of appended panels. 추가된 패널들의 배열

Example

// Suppose there were no panels at initialization

const flicking = new eg.Flicking("#flick");

flicking.replace(3, document.createElement("div")); // Add new panel at index 3

flicking.prepend("<div>Panel</div>"); // Prepended at index 2

flicking.prepend(["<div>Panel</div>", document.createElement("div")]); // Prepended at index 0, 1

flicking.prepend("<div>Panel</div>"); // Prepended at index 0, pushing every panels behind it.

prev(duration){eg.Flicking}

Flicking.ts, line 190

Move to the previous panel if it exists.

이전 패널이 존재시 해당 패널로 이동한다.

• duration (default: options.duration) optional
  Type: number

  Duration of the panel movement animation.(unit: ms)

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

Returns:

Type	Description
eg.Flicking	The instance itself. 인스턴스 자기 자신.

remove(index, deleteCount){FlickingPanel[]}

Flicking.ts, line 649

Remove panel at target index. This will decrease index of panels behind it.

index에 해당하는 자리의 패널을 제거한다. 수행시 index 이후의 패널들의 인덱스가 감소된다.

• index
  Type: number

  Index of panel to remove.

  제거할 패널의 인덱스

• deleteCount (default: 1) optional
  Type: number

  Number of panels to remove from index.

  index 이후로 제거할 패널의 개수.

Returns:

Type	Description
FlickingPanel[]	Array of removed panels 제거된 패널들의 배열

removePlugins(plugins){eg.Flicking}

Flicking.ts, line 493

Remove plugins from Flicking.

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

• plugins
  Type: Plugin | Plugin[]

  The plugin(s) to remove.

  제거 플러그인(들).

Returns:

Type	Description
eg.Flicking	The instance itself. 인스턴스 자기 자신.

replace(index, element){FlickingPanel[]}

Flicking.ts, line 634

Replace existing panels with new panels from given index. If target index is empty, add new panel at target index.

주어진 인덱스로부터의 패널들을 새로운 패널들로 교체한다. 인덱스에 해당하는 자리가 비어있다면, 새로운 패널을 해당 자리에 집어넣는다.

• index
  Type: number

  Start index to replace new panels.

  새로운 패널들로 교체할 시작 인덱스

• element
  Type: ElementLike | ElementLike[]

  Either HTMLElement, HTML string, or array of them.
  It can be also HTML string of multiple elements with same depth.

  HTMLElement 혹은 HTML 문자열, 혹은 그것들의 배열도 가능하다.
  또한, 같은 depth의 여러 개의 엘리먼트에 해당하는 HTML 문자열도 가능하다.

Returns:

Type	Description
FlickingPanel[]	Array of created panels by replace. 교체되어 새롭게 추가된 패널들의 배열

Example

// Suppose there were no panels at initialization

const flicking = new eg.Flicking("#flick");
// This will add new panel at index 3,

// Index 0, 1, 2 is empty at this moment.

// [empty, empty, empty, PANEL]

flicking.replace(3, document.createElement("div"));
// As index 2 was empty, this will also add new panel at index 2.

// [empty, empty, PANEL, PANEL]

flicking.replace(2, "<div>Panel</div>");
// Index 3 was not empty, so it will replace previous one.

// It will also add new panels at index 4 and 5.

// before - [empty, empty, PANEL, PANEL]

// after - [empty, empty, PANEL, NEW_PANEL, NEW_PANEL, NEW_PANEL]

flicking.replace(3, ["<div>Panel</div>", "<div>Panel</div>", "<div>Panel</div>"])

resize(){eg.Flicking}

Flicking.ts, line 528

Update panels to current state.

패널들을 현재 상태에 맞춰 갱신한다.

Returns:

Type	Description
eg.Flicking	The instance itself. 인스턴스 자기 자신.

setLastIndex(index){eg.Flicking}

Flicking.ts, line 405

Set maximum panel index for `infinite' mode.
needPanel won't be triggered anymore when last panel's index reaches it.
Also, you can't add more panels after it.

infinite 모드에서 적용되는 패널의 최대 인덱스를 설정한다.
마지막 패널의 인덱스가 설정한 값에 도달할 경우 더 이상 needPanel 이벤트가 발생되지 않는다.
또한, 설정한 인덱스 이후로 새로운 패널을 추가할 수 없다.

• index
  Type: number

  Maximum panel index.

  Maximum panel index.

Returns:

Type	Description
eg.Flicking	The instance itself. 인스턴스 자기 자신.

See:

• eg.Flicking.FlickingOptions
  eg.Flicking.FlickingOptions

setStatus(status){void}

Flicking.ts, line 472

Restore to the state of the status.

status의 상태로 복원한다.

• status
  Type: FlickingStatus

  Status value to be restored. You can specify the return value of the getStatus() method.

  복원할 상태 값. getStatus()메서드의 반환값을 지정하면 된다.

Returns:

Type	Description
void

inherited trigger(eventName, customEvent, restParam){boolean}

Component.ts, line 154

Triggers a custom event.

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

• eventName
  Type: string | ...

  The name of the custom event to be triggered

  발생할 커스텀 이벤트의 이름

• customEvent
  Type: object | ...

  Event data to be sent when triggering a custom event

  커스텀 이벤트가 발생할 때 전달할 데이터

• restParam
  Type: Array.<any>

  Additional parameters when triggering a custom event

  커스텀 이벤트가 발생할 때 필요시 추가적으로 전달할 데이터

Returns:

Type	Description
boolean	Indicates whether the event has occurred. If the stop() method is called by a custom event handler, it will return false and prevent the event from occurring. Ref 이벤트 발생 여부. 커스텀 이벤트 핸들러에서 stop() 메서드를 호출하면 'false'를 반환하고 이벤트 발생을 중단한다. 참고

Example

class Some extends eg.Component {
  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.
  }
});
some.on("hi", (e) => {
  // `currentTarget` is component instance.
  console.log(some === e.currentTarget); // true
});
// 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

Type Definitions

eg.Flicking.ChangeEventobject

Event that indicates index will be changed, and isn't restoring. Index will be changed at moveEnd event.

restore되지 않고, 인덱스가 변경될 것임을 나타내는 이벤트. 실제 인덱스는 moveEnd이벤트에서 변경된다.

Properties:

Name	Type	Description
type	string	Name of the event. 이벤트명
index	number	Expected panel's index that will arrive at animation end. 애니메이션 종료 시점에 도착할 것으로 예측되는 패널의 인덱스.
panel	eg.Flicking.FlickingPanel | null	Expected panel that will arrive at animation end. 애니메이션 종료 시점에 도착할 것으로 예측되는 패널.
progress	number	Absolute progress of how much it proceed from first panel. 0 at first panel, and 1 at last panel. 첫 번째 패널로부터 얼마만큼 진행했는지를 나타내는 진행도. 첫번째 패널에서 0, 마지막 패널에서 1의 값을 갖는다.
isTrusted	boolean	true when the event was generated by a user action("mouse" or "touch") otherwise false. 사용자 액션("mouse" 또는 "touch")에 의해 이벤트가 생성된 경우 true. 그 외는 false.
holding	boolean	Whether the user is inputting through the input device. (Whether it is 'mousedown' for a mouse device or 'touchmove' for a touch device.) 사용자가 입력 장치를 통해 입력중인지 여부. (마우스 장치라면 'mousedown' 여부, 터치 장치라면 'touchmove' 여부)
stop	function	Cancel the default action, and prevents every events after it. Not effective with events postfixed with -End 이벤트의 기본동작을 취소하고, 해당 이벤트 뒤에 발생할 이벤트들을 전부 발생하지 않도록 한다. -End가 접미사로 붙은 이벤트에서는 유효한 동작을 하지 않는다.
direction	"PREV" | "NEXT" | null	Expected direction of the panel movement. 예측되는 패널 이동 방향.
axesEvent	object | undefined	Original event emitted from Axes instance. Is undefined when when triggered by moveTo(), prev(), next(). 내부의 Axes 인스턴스로부터 발생된 원본 이벤트. moveTo(), prev(), next()와 같은 메소드에 의해 발생되었을 경우 undefined.
currentTarget	eg.Flicking	Flicking instance that triggered event. 이벤트를 발생시킨 Flicking의 인스턴스

eg.Flicking.ContentErrorEventobject

Event triggered each time the image/video element inside Flicking fails to load. This event is only triggered with resizeOnContentsReady option.

Flicking 내부의 이미지/비디오 엘리먼트의 로드가 실패했을때마다 발생했을 때마다 트리거되는 이벤트. resizeOnContentsReady 옵션이 활성화된 경우에만 트리거된다.

Properties:

Name	Type	Description
type	string	Name of the event. 이벤트명
element	HTMLElement	The image/video element that error is occured. 에러가 발생한 이미지/비디오 엘리먼트

eg.Flicking.ElementLikestring | HTMLElement

HTML string of single/mutiple HTMLElement, or an instance of HTMLElement.

단일/복수의 HTMLElement의 outerHTML에 해당하는 string, 혹은 HTMLElement의 인스턴스.

eg.Flicking.FlickingEventobject

Properties:

Name	Type	Description
type	string	Name of the event. 이벤트명
index	number	Index number of the current panel. 현재 패널의 인덱스 번호.
panel	eg.Flicking.FlickingPanel | null	Current panel. 현재 패널.
progress	number	Absolute progress of how much it proceed from first panel. 0 at first panel, and 1 at last panel. 첫 번째 패널로부터 얼마만큼 진행했는지를 나타내는 진행도. 첫번째 패널에서 0, 마지막 패널에서 1의 값을 갖는다.
isTrusted	boolean	true when the event was generated by a user action("mouse" or "touch") otherwise false. 사용자 액션("mouse" 또는 "touch")에 의해 이벤트가 생성된 경우 true. 그 외는 false.
holding	boolean	Whether the user is inputting through the input device. (Whether it is 'mousedown' for a mouse device or 'touchmove' for a touch device.) 사용자가 입력 장치를 통해 입력중인지 여부. (마우스 장치라면 'mousedown' 여부, 터치 장치라면 'touchmove' 여부)
stop	function	Cancel the default action, and prevents every events after it. Not effective with events postfixed with -End 이벤트의 기본동작을 취소하고, 해당 이벤트 뒤에 발생할 이벤트들을 전부 발생하지 않도록 한다. -End가 접미사로 붙은 이벤트에서는 유효한 동작을 하지 않는다.
direction	"PREV" | "NEXT" | null	Direction of the panel movement. null if not moved at all. 패널 이동 방향. 아직 움직이지 않았을 경우 null이다.
axesEvent	object | undefined	Original event emitted from Axes instance. 내부의 Axes 인스턴스로부터 발생된 원본 이벤트.
currentTarget	eg.Flicking	Flicking instance that triggered event. 이벤트를 발생시킨 Flicking의 인스턴스

eg.Flicking.FlickingOptionsTSInterface

Properties:

Name	Type	Description
classPrefix	string	A prefix of class names will be added for the panels, viewport, and camera. 패널들과 뷰포트, 카메라에 추가될 클래스 이름의 접두사.
deceleration	number	Deceleration value for panel movement animation for animation triggered by manual user input. A higher value means a shorter running time. 사용자의 동작으로 가속도가 적용된 패널 이동 애니메이션의 감속도. 값이 높을수록 애니메이션 실행 시간이 짧아진다.
horizontal	boolean	The direction of panel movement. (true: horizontal, false: vertical) 패널 이동 방향. (true: 가로방향, false: 세로방향)
circular	boolean	Enables circular mode, which connects first/last panel for continuous scrolling. 순환 모드를 활성화한다. 순환 모드에서는 양 끝의 패널이 서로 연결되어 끊김없는 스크롤이 가능하다.
infinite	boolean	Enables infinite mode, which can automatically trigger needPanel until reaching the last panel's index reaches the lastIndex. 무한 모드를 활성화한다. 무한 모드에서는 needPanel 이벤트를 자동으로 트리거한다. 해당 동작은 마지막 패널의 인덱스가 lastIndex와 일치할때까지 일어난다.
infiniteThreshold	number | string	A Threshold from viewport edge before triggering needPanel event in infinite mode. 무한 모드에서 needPanel이벤트가 발생하기 위한 뷰포트 끝으로부터의 최대 거리.
lastIndex	number	Maximum panel index that Flicking can set. Flicking won't trigger needPanel when the event's panel index is greater than it. Also, if the last panel's index reached a given index, you can't add more panels. Flicking이 설정 가능한 패널의 최대 인덱스. needPanel 이벤트에 지정된 인덱스가 최대 패널의 개수보다 같거나 커야 하는 경우에 이벤트를 트리거하지 않게 한다. 또한, 마지막 패널의 인덱스가 주어진 인덱스와 동일할 경우, 새로운 패널을 더 이상 추가할 수 없다.
threshold	number	Movement threshold to change panel(unit: pixel). It should be dragged above the threshold to change the current panel. 패널 변경을 위한 이동 임계값 (단위: 픽셀). 주어진 값 이상으로 스크롤해야만 패널 변경이 가능하다.
duration	number	Duration of the panel movement animation. (unit: ms) 패널 이동 애니메이션 진행 시간.(단위: ms)
panelEffect	(x: number) => number	An easing function applied to the panel movement animation. Default value is easeOutCubic. 패널 이동 애니메이션에 적용할 easing함수. 기본값은 easeOutCubic이다.
defaultIndex	number	Index of the panel to set as default when initializing. A zero-based integer. 초기화시 지정할 디폴트 패널의 인덱스로, 0부터 시작하는 정수.
inputType	string[]	Types of input devices to enable.(Reference) 활성화할 입력 장치 종류. (참고)
thresholdAngle	number	The threshold angle value(0 ~ 90). If the input angle from click/touched position is above or below this value in horizontal and vertical mode each, scrolling won't happen. 스크롤 동작을 막기 위한 임계각(0 ~ 90). 클릭/터치한 지점으로부터 계산된 사용자 입력의 각도가 horizontal/vertical 모드에서 각각 크거나 작으면, 스크롤 동작이 이루어지지 않는다.
bounce	number | string | [number | string, number | string]	The size value of the bounce area. Only can be enabled when circular=false. You can set different bounce value for prev/next direction by using array. number for px value, and string for px, and % value relative to viewport size.(ex - 0, "10px", "20%") 바운스 영역의 크기값. circular=false인 경우에만 사용할 수 있다. 배열을 통해 prev/next 방향에 대해 서로 다른 바운스 값을 지정 가능하다. number를 통해 px값을, stirng을 통해 px 혹은 뷰포트 크기 대비 %값을 사용할 수 있다.(ex - 0, "10px", "20%")
autoResize	boolean	Whether the resize method should be called automatically after a window resize event. window의 resize 이벤트 이후 자동으로 resize()메소드를 호출할지의 여부.
adaptive	boolean	Whether the height(horizontal)/width(vertical) of the viewport element reflects the height/width value of the panel after completing the movement. 목적 패널로 이동한 후 그 패널의 높이(horizontal)/너비(vertical)값을 뷰포트 요소의 높이/너비값에 반영할지 여부.
zIndex	number | ""	z-index value for viewport element. 뷰포트 엘리먼트의 z-index 값.
bound	boolean	Prevent the view from going out of the first/last panel. Only can be enabled when circular=false. 뷰가 첫번째와 마지막 패널 밖으로 나가는 것을 막아준다. circular=false인 경우에만 사용할 수 있다.
overflow	boolean	Disables CSS property overflow: hidden in viewport if true. true로 설정시 뷰포트에 overflow: hidden 속성을 해제한다.
hanger	number | string	The reference position of the hanger in the viewport, which hangs panel anchors should be stopped at. It should be provided in px or % value of viewport size. You can combinate those values with plus/minus sign. ex) "50", "100px", "0%", "25% + 100px" 뷰포트 내부의 행어의 위치. 패널의 앵커들이 뷰포트 내에서 멈추는 지점에 해당한다. px값이나, 뷰포트의 크기 대비 %값을 사용할 수 있고, 이를 + 혹은 - 기호로 연계하여 사용할 수도 있다. 예) "50", "100px", "0%", "25% + 100px"
anchor	number | string	The reference position of the anchor in panels, which can be hanged by viewport hanger. It should be provided in px or % value of panel size. You can combinate those values with plus/minus sign. ex) "50", "100px", "0%", "25% + 100px" 패널 내부의 앵커의 위치. 뷰포트의 행어와 연계하여 패널이 화면 내에서 멈추는 지점을 설정할 수 있다. px값이나, 패널의 크기 대비 %값을 사용할 수 있고, 이를 + 혹은 - 기호로 연계하여 사용할 수도 있다. 예) "50", "100px", "0%", "25% + 100px"
gap	number	Space value between panels. Should be given in number.(px) 패널간에 부여할 간격의 크기를 나타내는 숫자.(px)
moveType	MoveTypeOption	Movement style by user input. (ex: snap, freeScroll) 사용자 입력에 의한 이동 방식.(ex: snap, freeScroll)
useOffset	boolean	Whether to use offsetWidth/offsetHeight instead of getBoundingClientRect for panel/viewport size calculation. You can use this option to calculate the original panel size when CSS transform is applied to viewport or panel. ⚠️ If panel size is not fixed integer value, there can be a 1px gap between panels. 패널과 뷰포트의 크기를 계산할 때 offsetWidth/offsetHeight를 getBoundingClientRect 대신 사용할지 여부. 패널이나 뷰포트에 CSS transform이 설정되어 있을 때 원래 패널 크기를 계산하려면 활성화할 수 있다. ⚠️ 패널의 크기가 정수로 고정되어있지 않다면 패널 사이에 1px의 공간이 생길 수 있다.
isEqualSize	boolean | string[]	This option indicates whether all panels have the same size(true) of first panel, or it can hold a list of class names that determines panel size. Enabling this option can increase performance while recalculating panel size. 모든 패널의 크기가 동일한지(true), 혹은 패널 크기를 결정하는 패널 클래스들의 리스트. 이 옵션을 설정하면 패널 크기 재설정시에 성능을 높일 수 있다.
isConstantSize	boolean	Whether all panels have a constant size that won't be changed after resize. Enabling this option can increase performance while recalculating panel size. 모든 패널의 크기가 불변인지의 여부. 이 옵션을 'true'로 설정하면 패널 크기 재설정시에 성능을 높일 수 있다.
renderOnlyVisible	boolean	Whether to render visible panels only. This can dramatically increase performance when there're many panels. 보이는 패널만 렌더링할지 여부를 설정한다. 패널이 많을 경우에 퍼포먼스를 크게 향상시킬 수 있다.
renderExternal	boolean	Whether to use external rendering. It will delegate DOM manipulation and can synchronize the rendered state by calling sync() method. You can use this option to use in frameworks like React, Vue, Angular, which has its states and rendering methods. 외부 렌더링을 사용할 지의 여부. 이 옵션을 사용시 렌더링을 외부에 위임할 수 있고, sync()를 호출하여 그 상태를 동기화할 수 있다. 이 옵션을 사용하여, React, Vue, Angular 등 자체적인 상태와 렌더링 방법을 갖는 프레임워크에 대응할 수 있다.
iOSEdgeSwipeThreshold	number	Area (px) that can go to the next page when swiping the right edge in iOS safari iOS Safari에서 오른쪽 엣지를 스와이프 하는 경우 다음 페이지로 넘어갈 수 있는 영역(px)
resizeOnContentsReady	boolean	Whether to collect statistics on how you are using Flicking. These statistical data do not contain any personal information and are used only as a basis for the development of a user-friendly product. 어떻게 Flicking을 사용하고 있는지에 대한 통계 수집 여부를 나타낸다. 이 통계자료는 개인정보를 포함하고 있지 않으며 오직 사용자 친화적인 제품으로 발전시키기 위한 근거자료로서 활용한다.
collectStatistics	boolean

eg.Flicking.FlickingPanelTSInterface

Properties:

Name	Type	Description
getElement	() => HTMLElement	HTML element of panel object. 패널 오브젝트에 지정된 HTML Element.
getIndex	() => number	Index of panel, zero-based integer. 패널의 인덱스로, 0부터 시작하는 정수.
getPosition	() => number	Position of panel where it is placed from left(horizontal)/top(vertical). 패널의 위치로, 왼쪽(horizontal)/위(vertical)을 기준으로 얼마나 떨어져 있는지를 나타내는 값.
getAnchorPosition	() => number	Position of panel anchor where it is actually stopped interacting with hanger position. Hanger와 상호작용하여 패널에 도착했을 때의 위치를 계산하는데 사용되는 패널 내부 Anchor의 위치.
getSize	() => number	Size of panel, width(horizontal)/height(vertical) in px. px단위의 패널의 크기, horizontal일 때는 너비, vertical일 때는 높이에 해당한다.
getProgress	() => number	Progress of movement between previous or next panel relative to current panel. 현재 패널로부터 이전/다음 패널으로의 이동 진행률.
getOutsetProgress	() => number	Progress of movement between points that panel is completely invisible outside of viewport.(prev direction: -1, selected point: 0, next direction: 1) 현재 패널이 뷰포트 영역 밖으로 완전히 사라지는 지점을 기준으로 하는 진행도.(prev방향: -1, 선택 지점: 0, next방향: 1)
getVisibleRatio	() => number	Percentage of area where panel is visible in the viewport. 뷰포트 안에서 패널이 보이는 영역의 비율.
focus	(duration?: number) => void	Move to this panel. 이 패널로 이동한다. Properties Name Type Argument Description duration number <optional> Duration of the panel movement. (unit: ms) 패널 이동 애니메이션 진행 시간.(단위: ms)
update	(updateFunction: (element: HTMLElement) => any) => void	Update panel element with given function. 패널 요소를 주어진 함수를 이용하여 업데이트한다. Properties Name Type Argument Description updateFunction function <optional> Callback function to update panel element. argument is panel's element. 패널 요소를 업데이트하기 위한 콜백 함수. 패널의 HTMLElement를 인자로 갖는다.
prev	() => FlickingPanel | null	Return previous panel of current panel, null if it doesn't exist. 현재 패널의 이전 패널을 반환한다. 패널이 존재하지 않을 시 null을 반환한다.
next	() => FlickingPanel | null	Return next panel of current panel, null if it doesn't exist. 현재 패널의 다음 패널을 반환한다. 패널이 존재하지 않을 시 null을 반환한다.
insertBefore	(element: ElementLike | ElementLike[]) => FlickingPanel[]	Insert new panels before reference panel. Return inserted panels. 새로운 패널들을 해당 패널 앞에 추가한다. 새로 추가된 패널들을 반환한다.
insertAfter	(element: ElementLike | ElementLike[]) => FlickingPanel[]	Insert new panels after reference panel. Return inserted panels. 새로운 패널들을 해당 패널 뒤에 추가한다. 새로 추가된 패널들을 반환한다.
remove	() => void	Remove this panel. 이 패널을 제거한다.

Example

Updating panel

// As panel elements can be cloned in circular mode, `element` parameter is provided as read-only.
// You should use `update()` function to consistently update all panel elements cloned.

// Don't
panel.element.classList.add("foo");
// Do
panel.update(el => {
  el.classList.add("foo");
});

eg.Flicking.FlickingStatusTSInterface

Properties:

Name	Type	Description
index	number	Index of current panel. 현재 패널의 인덱스.
panels	Array<{html: string, index: number, position: number}>	Panels Flicking has. Flicking이 갖고 있는 패널들의 정보. Properties Name Type Argument Description html string <optional> outerHTML of each panel elements. 각 패널 엘리먼트의 outerHTML. index index <optional> Index of each panels. 각 패널의 인덱스.
position	number	Camera position of Flicking. Flicking의 카메라 위치.

eg.Flicking.MoveTypeFreeScrollOptionTSInterface

With "freeScroll" move type, it can be scrolled freely without alignment.

패널이 정해진 지점에 정렬되지 않고, 자유롭게 스크롤할 수 있는 이동 방식.

Properties:

Name	Type	Description
type	"freeScroll"	Should be "freeScroll" to enable free scroll mode. "freeScroll"을 지정하여 free scroll 모드를 활성화할 수 있다.

eg.Flicking.MoveTypeOption"snap" "freeScroll" eg.Flicking.MoveTypeSnapOption eg.Flicking.MoveTypeFreeScrollOption

Movement style by user input.

사용자 입력에 의한 이동 방식.

eg.Flicking.MoveTypeSnapOptionTSInterface

With "snap" move type, momentum is applied while choosing destination panel at release time.
You can set how many panels can go after release.

입력을 중단한 시점의 가속도에 영향받아 도달할 패널을 계산하는 이동 방식.
입력 중단 이후 최대 몇 개까지의 패널을 통과하여 이동할지 설정할 수 있다.

Properties:

Name	Type	Argument	Description
type	"snap"		Should be "snap" to enable snap mode. "snap"을 지정하여 snap 모드를 활성화할 수 있다.
count	number	<optional>	Maximum number of panels can go after release. 입력 중단 이후 통과하여 이동할 수 있는 패널의 최대 갯수.

eg.Flicking.NeedPanelEventobject

Event can be triggered in infinite mode. When camera element reaches at infinite threshold, this event can be triggered to indicate there should be more content to be displayed.

무한 모드에서 발생될 수 있는 이벤트. 화면의 양 끝, 혹은 불연속적인 인덱스를 가진 패널을 기준으로 infiniteThreshold만큼 떨어진 지점에 도달하였을 때 발생될 수 있다.

Properties:

Name	Type	Description
type	string	Name of the event. 이벤트명
index	number	Index of panel that needs panel before or after.. 앞 또는 뒤에 패널이 필요한 패널의 인덱스.
panel	eg.Flicking.FlickingPanel | null	Reference panel that needs panel before or after it.. 앞 또는 뒤에 패널이 필요한 기준 패널.
progress	boolean	Absolute progress of how much it proceed from first panel. 0 at first panel, and 1 at last panel. 첫 번째 패널로부터 얼마만큼 진행했는지를 나타내는 진행도. 첫번째 패널에서 0, 마지막 패널에서 1의 값을 갖는다.
isTrusted	boolean	true when the event was generated by a user action("mouse" or "touch") otherwise false. 사용자 액션("mouse" 또는 "touch")에 의해 이벤트가 생성된 경우 true. 그 외는 false.
holding	boolean	Whether the user is inputting through the input device. (Whether it is 'mousedown' for a mouse device or 'touchmove' for a touch device.) 사용자가 입력 장치를 통해 입력중인지 여부. (마우스 장치라면 'mousedown' 여부, 터치 장치라면 'touchmove' 여부)
direction	"PREV" | "NEXT" | null	Direction of panel is needed from reference panel. null if no panel exists. 기준 패널로부터 패널이 필요한 방향. 패널이 하나도 없을 경우 null이다.
axesEvent	object | undefined	Original event emitted from Axes instance. 내부의 Axes 인스턴스로부터 발생된 원본 이벤트.
currentTarget	eg.Flicking	Flicking instance that triggered event. 이벤트를 발생시킨 Flicking의 인스턴스
fill	function	A helper function that can be used to fill the empty panel area without consideration of direction. Check the example below. 방향을 고려하지 않고 패널을 손쉽게 추가할 수 있게 해주는 헬퍼 함수. 사용 방법은 아래의 예를 참조.
range	object	Range of indexes that is emtpy. 패널이 존재하지 않는 인덱스의 범위. Properties Name Type Argument Description min number <optional> Minimum index of panels needed.. 필요한 패널들의 최소 인덱스. max number <optional> Maximum index of panels needed.. 필요한 패널들의 최대 인덱스. length number <optional> How many panels are needed to fill empty spaces. 몇 개의 패널이 필요한지를 나타내는 정수.

Example

flicking.on("needPanel", e => {
    // You can use "fill" method in event to add panels easily.
    e.fill("<div>New panel</div>");
})

eg.Flicking.PluginTSInterface

Properties:

Name	Type	Argument	Description
init	(flicking: Flicking) => void		Method called when plugin is added. 플러그인을 추가했을 때 발생하는 메소드.
update	(flicking: Flicking) => void	<optional>	Method called when resize or update in flicking. 플리킹에서 resize가 발생하거나 update를 했을 때 발생하는 메소드.
destroy	(flicking: Flicking) => void		Method called when plugin is removed. 플러그인을 제거했을 때 발생하는 메소드.

eg.Flicking.SelectEventobject

Event will be triggered when panel is statically click / touched.

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

Properties:

Name	Type	Description
type	string	Name of the event. 이벤트명
index	number	Selected panel's index.. 선택된 패널의 인덱스.
panel	eg.Flicking.FlickingPanel | null	Selected panel.. 선택된 패널.
progress	number	Absolute progress of how much it proceed from first panel. 0 at first panel, and 1 at last panel. 첫 번째 패널로부터 얼마만큼 진행했는지를 나타내는 진행도. 첫번째 패널에서 0, 마지막 패널에서 1의 값을 갖는다.
isTrusted	boolean	true when the event was generated by a user action("mouse" or "touch") otherwise false. 사용자 액션("mouse" 또는 "touch")에 의해 이벤트가 생성된 경우 true. 그 외는 false.
holding	boolean	Whether the user is inputting through the input device. (Whether it is 'mousedown' for a mouse device or 'touchmove' for a touch device.) 사용자가 입력 장치를 통해 입력중인지 여부. (마우스 장치라면 'mousedown' 여부, 터치 장치라면 'touchmove' 여부)
direction	"PREV" | "NEXT" | null	Expected direction of the panel movement. 예측되는 패널 이동 방향.
axesEvent	object | undefined	Original event emitted from Axes instance. 내부의 Axes 인스턴스로부터 발생된 원본 이벤트.
currentTarget	eg.Flicking	Flicking instance that triggered event. 이벤트를 발생시킨 Flicking의 인스턴스

eg.Flicking.VisibleChangeEventobject

Event triggered when Flicking's visible panel changes. This event is only triggered with renderOnlyVisible option.

보이는 패널 정보에 변화가 있을 경우에 발생되는 이벤트. renderOnlyVisible 옵션이 활성화된 경우에만 트리거된다.

Properties:

Name	Type	Description
type	string	Name of the event. 이벤트명
range	object	Range of indexes that is newly visible. 새로 보이는 패널의 인덱스 범위. Properties Name Type Argument Description min number <optional> Minimum index of visible panels.. 보이는 패널들 중 최소 인덱스. max number <optional> Maximum index of visible panels.. 보이는 패널들 중 최대 인덱스.

Events

change

types.ts, line 260

Event that indicates index will be changed, and isn't restoring. Index will be changed at moveEnd event.
It can be triggered when user finished input, or flicking start to move by method.
It won't be triggered when moving to same panel, unless it's circulated more than one cycle in circular mode.
Calling stop() in event will prevent index changing & panel moving.

event doesn't have axesEvent property when triggered by moveTo(), prev(), next() method.

restore되지 않고, 인덱스가 변경될 것임을 나타내는 이벤트. 실제 인덱스는 moveEnd 이벤트에서 변경된다.
사용자가 입력을 마쳤을 때, 혹은 메소드를 통해 이동을 시작했을 때 발생한다.
동일 패널로 이동시에는 발생되지 않지만, circular 모드에서 한 바퀴 이상 순환하여 동일 패널로 도착했을 때에도 발생된다.
이벤트의 stop()을 호출시 패널로의 이동을 막는다.

moveTo(), prev(), next()와 같은 메소드에 의해 호출되었을 경우 event내의 axesEvent 프로퍼티 값은 undefined이다.

Type:

• eg.Flicking.ChangeEvent

contentError

types.ts, line 295

Event triggered each time the image/video element inside Flicking fails to load. This event is only triggered with resizeOnContentsReady option.

Flicking 내부의 이미지/비디오 엘리먼트의 로드가 실패했을때마다 발생했을 때마다 트리거되는 이벤트. resizeOnContentsReady 옵션이 활성화된 경우에만 트리거된다.

Type:

• eg.Flicking.ContentErrorEvent

holdEnd

types.ts, line 232

Event triggered when user stopped dragging.

사용자가 드래그를 중단했을 때 발생하는 이벤트.

Type:

• eg.Flicking.FlickingEvent

holdStart

types.ts, line 225

Event triggered when user started dragging.

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

Type:

• eg.Flicking.FlickingEvent

move

types.ts, line 246

Event triggered while moving to the destination panel.

목적 패널로의 이동 도중에 발생하는 이벤트.

Type:

• eg.Flicking.FlickingEvent

moveEnd

types.ts, line 253

Event triggered after finish moving to the destination panel.

목적 패널로의 이동을 완료한 다음 발생하는 이벤트.

Type:

• eg.Flicking.FlickingEvent

moveStart

types.ts, line 239

Event triggered once before first move event.

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

Type:

• eg.Flicking.FlickingEvent

needPanel

types.ts, line 281

Event triggered when Flicking confronts panels don't have successive indexes, so it needs more content to draw panel in infinite mode.

무한 모드에서, Flicking이 인덱스가 연속하지 않은 패널들을 만나 새로운 패널이 필요함을 알리고자 할 때 발생시키는 이벤트.

Type:

• eg.Flicking.NeedPanelEvent

restore

types.ts, line 267

Event triggered when user drag amount not reached threshold in FlickingOptions.

사용자가 드래그한 정도가 FlickingOptions의 threshold값보다 작을 때 발생하는 이벤트.

Type:

• eg.Flicking.FlickingEvent

select

types.ts, line 274

Event triggered when user statically selected (clicked) panel.

사용자가 패널을 정적으로 선택(클릭)했을 때 발생하는 이벤트.

Type:

• eg.Flicking.SelectEvent

visibleChange

types.ts, line 288

Event triggered when Flicking's visible panel changes. This event only triggered with renderOnlyVisible option.

보이는 패널 정보에 변화가 있을 경우에 발생되는 이벤트. renderOnlyVisible 옵션이 활성화된 경우에만 트리거된다.

Type:

• eg.Flicking.VisibleChangeEvent