버전: 4.12.0

Flicking

class Flicking extends Component

Properties

Methods

Events

init
destroy
prev
next
moveTo
updateAnimation
stopAnimation
getPanel
enableInput
disableInput
getStatus
setStatus
addPlugins
removePlugins
resize
append
prepend
insert
remove

ready
beforeResize
afterResize
holdStart
holdEnd
moveStart
move
moveEnd
willChange
changed
willRestore
restored
select
needPanel
visibleChange
reachEdge
panelChange

constructor

new Flicking(root, options)

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
root	HTMLElement \| string			Flicking을 초기화할 HTMLElement로, `string` 타입으로 지정시 css 선택자 문자열을 지정해야 합니다.
options	object	✔️	{}	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:

Viewport

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:

Panel

panels

readonly

전체 패널들의 배열

Type: Array<Panel>

See:

Panel

panelCount

readonly

전체 패널의 개수

Type: number

visiblePanels

readonly

현재 보이는 패널의 배열

Type: Array<Panel>

See:

Panel

animating

readonly

현재 애니메이션 동작 여부

Type: boolean

holding

readonly

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

Type: boolean

activePlugins

readonly

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

Type: Array<Plugin>

align

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

Type: ALIGN | string | number | Object

Default: "center"

PROPERTY	TYPE	DESCRIPTION
panel	ALIGN \| string \| number	개개의 Panel에 적용할 값
camera	ALIGN \| string \| number	Camera에 적용할 값

See:

align ( Options )

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:

defaultIndex ( Options )

horizontal

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

Type: boolean

Default: true

See:

horizontal ( Options )

circular

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

Type: boolean

Default: false

See:

circular ( Options )

circularFallback

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

Type: string

Default: "linear"

See:

bound

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

Type: boolean

Default: false

See:

bound ( Options )

adaptive

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

Type: boolean

Default: false

See:

adaptive ( Options )

panelsPerView

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

Type: number

Default: -1

See:

panelsPerView ( Options )

noPanelStyleOverride

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

Type: boolean

Default: false

resizeOnContentsReady

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

Type: boolean

Default: false

See:

resizeOnContentsReady ( Options )

nested

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

Type: boolean

Default: false

See:

nested ( Options )

needPanelThreshold

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

Type: number

Default: 0

See:

needPanelThreshold ( Options )

preventEventsBeforeInit

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

Type: boolean

Default: true

See:

preventEventsBeforeInit ( Options )

deceleration

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

Type: number

Default: 0.0075

See:

deceleration ( Options )

easing

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

Type: function

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

See:

이징 함수 Cheat Sheet http://easings.net/
Easing ( Options )

duration

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

Type: number

Default: 500

See:

duration ( Options )

inputType

활성화할 입력 장치 종류

Type: Array<string>

Default: ["touch", "mouse"]

See:

moveType

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

Type: MOVE_TYPE | Pair.<string, object>

Default: "snap"

See:

moveType ( Options )
|moveType|control|options|
|:---:|:---:|:---:|
|"snap"|SnapControl||
|"freeScroll"|FreeControl|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

See:

Threshold ( Options )

dragThreshold

사용자의 입력을 인식하기 위한 최소한의 거리 (단위: px). 주어진 값 이상으로 스크롤해야만 패널이 움직입니다.

Type: number

Default: 1

See:

dragThreshold ( Options )

interruptable

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

Type: boolean

Default: true

See:

Interruptable ( Options )

bounce

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

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

Default: "20%"

See:

bounce ( Options )

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:

iOSEdgeSwipeThreshold ( Options )

preventClickOnDrag

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

Type: boolean

Default: true

See:

preventClickOnDrag ( Options )

preventDefaultOnDrag

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

Type: boolean

Default: false

See:

preventDefaultOnDrag ( Options )

disableOnInit

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

Type: boolean

Default: false

See:

disableOnInit ( Options )

changeOnHold

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

Type: boolean

Default: false

See:

changeOnHold ( Options )

renderOnlyVisible

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

Type: boolean

Default: false

See:

renderOnlyVisible ( Options )

virtual

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

Type: VirtualManager

PROPERTY	TYPE	DEFAULT	DESCRIPTION
renderPanel	function		패널 엘리먼트의 innerHTML을 렌더링하는 함수
initialPanelCount	number		최초로 렌더링할 패널의 개수
cache	boolean	false	렌더링된 패널의 innerHTML 정보를 캐시할지 여부
panelClass	string	"flicking-panel"	렌더링되는 패널 엘리먼트에 적용될 클래스 이름

See:

virtual ( Options )

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:

autoInit ( Options )

autoResize

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

Type: boolean

Default: true

useResizeObserver

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

Type: boolean

Default: true

See:

useResizeObserver ( Options )

resizeDebounce

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

Type: number

Default: 0

See:

resizeDebounce ( Options )

maxResizeDebounce

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

Type: number

Default: 100

See:

maxResizeDebounce ( Options )

useFractionalSize

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

Type: boolean

Default: false

See:

useFractionalSize ( Options )

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

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

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
duration	number	✔️	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()`이 호출된 경우|

async

다음 패널로 이동합니다 (현재 인덱스 + 1)

Returns: Promise<void>

다음 패널 도달시에 resolve되는 Promise

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
duration	number	✔️	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

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
index	number			이동할 패널의 인덱스
duration	number	✔️	options.duration	애니메이션 진행 시간 (단위: ms)
direction	DIRECTION	✔️	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

PARAMETER	TYPE	OPTIONAL	DESCRIPTION
index	number		이동할 패널의 인덱스
duration	number	✔️	애니메이션 진행 시간 (단위: ms)
direction	DIRECTION	✔️	이동할 방향. circular 옵션 활성화시에만 사용 가능합니다

Throws: FlickingError

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

stopAnimation

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

Returns: void

Emits: Flicking#event:moveEnd

getPanel

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

Returns: Panel | null

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

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
index	number

See:

Panel

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

현재 상태값 정보를 가진 객체.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
options	object	✔️	{}	Status 반환 옵션
options.index	boolean	✔️	true	현재 패널 인덱스를 반환값에 포함시킵니다. setStatus 호출시 자동으로 해당 인덱스로 카메라를 움직입니다
options.position	boolean	✔️	true	카메라의 현재 위치를 반환값에 포함시킵니다. 이 옵션은 moveType이 `freeScroll`일 경우에만 동작합니다
options.includePanelHTML	boolean	✔️	false	패널의 `outerHTML`을 반환값에 포함시킵니다
options.visiblePanelsOnly	boolean	✔️	false	현재 보이는 패널(visiblePanel)의 HTML만 반환합니다. `includePanelHTML`이 `true`일 경우에만 동작합니다.

setStatus

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

Returns: void

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
status	Partial<Status>			복원할 상태 값. getStatus() 메서드의 반환값을 지정하면 됩니다

addPlugins

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

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
plugins	Plugin			추가할 플러그인(들)

See:

https://github.com/naver/egjs-flicking-plugins

removePlugins

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

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
plugin	Plugin			제거 플러그인(들).

See:

https://github.com/naver/egjs-flicking-plugins

resize

async

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

Returns: this

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

append

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

Returns: Array<Panel>

추가된 패널들의 배열

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
element	ElementLike \| 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>

추가된 패널들의 배열

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
element	ElementLike \| 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>

추가된 패널들의 배열

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
index	number			새로 패널들을 추가할 인덱스
element	ElementLike \| 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>

제거된 패널들의 배열

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
index	number			제거할 패널의 인덱스
deleteCount	number	✔️	1	`index` 이후로 제거할 패널의 개수

Events

ready

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

Type: object

PROPERTY	TYPE	DESCRIPTION
currentTarget	Flicking	이 이벤트를 트리거한 Flicking의 인스턴스
eventType	string	이벤트명

beforeResize

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

Type: object

PROPERTY	TYPE	DESCRIPTION
currentTarget	Flicking	이 이벤트를 트리거한 Flicking의 인스턴스
eventType	string	이벤트명
width	number	기존 뷰포트 너비
height	number	기존 뷰포트 높이
element	HTMLElement	뷰포트 엘리먼트

afterResize

Flicking의 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 이벤트

willChange

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

Type: object

PROPERTY	TYPE	DESCRIPTION
currentTarget	Flicking	이 이벤트를 트리거한 Flicking의 인스턴스
eventType	string	이벤트명
stop	function	이벤트 동작을 멈추고, 사용자가 드래그하지 못하도록 막습니다.
index	number	변경할 인덱스
panel	Panel	인덱스 변경 이후 활성화된 패널로 설정할 패널
isTrusted	boolean	이벤트가 사용자 입력에 의하여 발생되었는지를 나타내는 값
direction	DIRECTION	현재 활성화된 패널로부터 이동하고자 하는 패널의 방향

changed

Event 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	이전 카메라 위치 대비 이동 방향

restored

Flicking이 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>	제거된 패널의 배열

constructor​

Properties​

VERSION​

control​

camera​

renderer​

viewport​

initialized​

circularEnabled​

virtualEnabled​

index​

element​

currentPanel​

panels​

panelCount​

visiblePanels​

animating​

holding​

activePlugins​

align​

defaultIndex​

horizontal​

circular​

circularFallback​

bound​

adaptive​

panelsPerView​

noPanelStyleOverride​

resizeOnContentsReady​

nested​

needPanelThreshold​

preventEventsBeforeInit​

deceleration​

easing​

duration​

inputType​

moveType​

threshold​

dragThreshold​

interruptable​

bounce​

iOSEdgeSwipeThreshold​

preventClickOnDrag​

preventDefaultOnDrag​

disableOnInit​

changeOnHold​

renderOnlyVisible​

virtual​

autoInit​

autoResize​

useResizeObserver​

resizeDebounce​

maxResizeDebounce​

useFractionalSize​

externalRenderer​

renderExternal​

Methods​

init​

destroy​

prev​

next​

moveTo​

updateAnimation​

stopAnimation​

getPanel​

enableInput​

disableInput​

getStatus​

setStatus​

addPlugins​

removePlugins​

resize​

append​

prepend​

insert​

remove​

Events​

ready​

beforeResize​

afterResize​

constructor

Properties

VERSION

control

camera

renderer

viewport

initialized

circularEnabled

virtualEnabled

index

element

currentPanel

panels

panelCount

visiblePanels

animating

holding

activePlugins

align

defaultIndex

horizontal

circular

circularFallback

bound

adaptive

panelsPerView

noPanelStyleOverride

resizeOnContentsReady

nested

needPanelThreshold

preventEventsBeforeInit

deceleration

easing

duration

inputType

moveType

threshold

dragThreshold

interruptable

bounce

iOSEdgeSwipeThreshold

preventClickOnDrag

preventDefaultOnDrag

disableOnInit

changeOnHold

renderOnlyVisible

virtual

autoInit

autoResize

useResizeObserver

resizeDebounce

maxResizeDebounce

useFractionalSize

externalRenderer

renderExternal

Methods

init

destroy

prev

next

moveTo

updateAnimation

stopAnimation

getPanel

enableInput

disableInput

getStatus

setStatus

addPlugins

removePlugins

resize

append

prepend

insert

remove

Events

ready

beforeResize

afterResize