Class: Flicking

eg.Flicking

new eg.Flicking(element, options)

  • element
    Type: string | HTMLElement

    A base element for the eg.Flicking module. When specifying a value as a string type, you must specify a css selector string to select the element.

    eg.Flicking 모듈을 사용할 기준 요소. string타입으로 값 지정시 요소를 선택하기 위한 css 선택자 문자열을 지정해야 한다.

  • options (default: {}) optional
    Type: Partial<FlickingOptions>

    An option object of the eg.Flicking module

    eg.Flicking 모듈의 옵션 객체

    • classPrefix (default: "eg-flick") optional
      Type: string

      A prefix of class names will be added for the panels, viewport, and camera.

      패널들과 뷰포트, 카메라에 추가될 클래스 이름의 접두사.

    • deceleration (default: 0.0075) optional
      Type: number

      Deceleration value for panel movement animation for animation triggered by manual user input. A higher value means a shorter running time.

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

    • horizontal (default: true) optional
      Type: boolean

      The direction of panel movement. (true: horizontal, false: vertical)

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

    • circular (default: false) optional
      Type: boolean

      Enables circular mode, which connects first/last panel for continuous scrolling.

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

    • infinite (default: false) optional
      Type: boolean

      Enables infinite mode, which can automatically trigger needPanel until reaching the last panel's index reaches the lastIndex.

      무한 모드를 활성화한다. 무한 모드에서는 needPanel 이벤트를 자동으로 트리거한다. 해당 동작은 마지막 패널의 인덱스가 lastIndex와 일치할때까지 일어난다.

    • infiniteThreshold (default: 0) optional
      Type: number

      A Threshold from viewport edge before triggering needPanel event in infinite mode.

      무한 모드에서 needPanel이벤트가 발생하기 위한 뷰포트 끝으로부터의 최대 거리.

    • lastIndex (default: Infinity) optional
      Type: 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 (default: 40) optional
      Type: number

      Movement threshold to change panel(unit: pixel). It should be dragged above the threshold to change the current panel.

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

    • duration (default: 100) optional
      Type: number

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

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

    • panelEffect (default: x => 1 - Math.pow(1 - x, 3)) optional
      Type: function

      An easing function applied to the panel movement animation. Default value is easeOutCubic.

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

    • defaultIndex (default: 0) optional
      Type: number

      Index of the panel to set as default when initializing. A zero-based integer.

      초기화시 지정할 디폴트 패널의 인덱스로, 0부터 시작하는 정수.

    • inputType (default: ["touch,"mouse"]) optional
      Type: Array.<string>

      Types of input devices to enable.(Reference)

      활성화할 입력 장치 종류. (참고)

    • thresholdAngle (default: 45) optional
      Type: 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 (default: [10,10]) optional
      Type: number | string | Array.<number> | Array.<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 (default: false) optional
      Type: boolean

      Whether the resize method should be called automatically after a window resize event.

      window의 resize 이벤트 이후 자동으로 resize()메소드를 호출할지의 여부.

    • adaptive (default: false) optional
      Type: 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 (default: 2000) optional
      Type: number | ""

      z-index value for viewport element.

      뷰포트 엘리먼트의 z-index 값.

    • bound (default: false) optional
      Type: boolean

      Prevent the view from going out of the first/last panel. Only can be enabled when circular=false.

      뷰가 첫번째와 마지막 패널 밖으로 나가는 것을 막아준다. circular=false인 경우에만 사용할 수 있다.

    • overflow (default: false) optional
      Type: boolean

      Disables CSS property overflow: hidden in viewport if true.

      true로 설정시 뷰포트에 overflow: hidden 속성을 해제한다.

    • hanger (default: "50%") optional
      Type: 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 (default: "50%") optional
      Type: 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 (default: 0) optional
      Type: number

      Space value between panels. Should be given in number.(px)

      패널간에 부여할 간격의 크기를 나타내는 숫자.(px)

    • moveType (default: "snap") optional

      Movement style by user input. (ex: snap, freeScroll)

      사용자 입력에 의한 이동 방식.(ex: snap, freeScroll)

    • useOffset (default: false) optional
      Type: 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/offsetHeightgetBoundingClientRect 대신 사용할지 여부.
      패널이나 뷰포트에 CSS transform이 설정되어 있을 때 원래 패널 크기를 계산하려면 옵션을 활성화한다.
      ⚠️ 패널의 크기가 정수로 고정되어있지 않다면 패널 사이에 1px의 공간이 생길 수 있다.

    • renderOnlyVisible (default: false) optional
      Type: boolean

      Whether to render visible panels only. This can dramatically increase performance when there're many panels.

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

    • isEqualSize (default: false) optional
      Type: boolean | Array.<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 (default: false) optional
      Type: 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'로 설정하면 패널 크기 재설정시에 성능을 높일 수 있다.

    • renderExternal (default: false) optional
      Type: 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 등 자체적인 상태와 렌더링 방법을 갖는 프레임워크에 대응할 수 있다.

    • resizeOnContentsReady (default: false) optional
      Type: boolean

      Whether to resize the Flicking after the image/video elements inside viewport are ready.
      Use this property to prevent wrong Flicking layout caused by dynamic image / video sizes.

      Flicking 내부의 이미지 / 비디오 엘리먼트들이 전부 로드되었을 때 Flicking의 크기를 재계산하기 위한 옵션.
      이미지 / 비디오 크기가 고정 크기가 아닐 경우 사용하여 레이아웃이 잘못되는 것을 방지할 수 있다.

    • collectStatistics (default: true) optional
      Type: 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을 사용하고 있는지에 대한 통계 수집 여부를 나타낸다. 이 통계자료는 개인정보를 포함하고 있지 않으며 오직 사용자 친화적인 제품으로 발전시키기 위한 근거자료로서 활용한다.

See:

Browser Support

Browser Version
Desktop - Internet Explorer 10+
Desktop - Chrome latest
Desktop - Firefox latest
Desktop - Safari latest
Desktop - Edge latest
iOS 7+
Andorid 4.X+

Extends

  • eg.Component

Requires

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}

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[]}

Add new panels at the end of panels.

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

  • element

    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}

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}

Block input devices.

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

Returns:
Type Description
eg.Flicking
The instance itself.

인스턴스 자기 자신.

enableInput(){eg.Flicking}

Unblock input devices.

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

Returns:
Type Description
eg.Flicking
The instance itself.

인스턴스 자기 자신.

getAllPanels(includeClone){FlickingPanel[]}

Return all panels.

모든 패널들을 반환한다.

  • includeClone optional
    Type: boolean

    Should include cloned panels or not.

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

Returns:
Type Description
FlickingPanel[]
All panels.

모든 패널들.

getCloneCount(){number}

Return how many groups of clones are created.

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

Returns:
Type Description
number
Length of cloned panel groups.

클론된 패널 그룹의 개수

getCurrentPanel(){FlickingPanel | null}

Return current panel. null if no panel exists.

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

Returns:
Type Description
FlickingPanel | null
Current panel.

현재 패널.

getElement(){HTMLElement}

Return the wrapper element user provided in constructor.

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

Returns:
Type Description
HTMLElement
Wrapper element user provided.

사용자가 제공한 래퍼 엘리먼트.

getIndex(){number}

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}

Get maximum panel index for infinite mode.

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

Returns:
Type Description
number
Maximum index of panel that can be added.

최대 추가 가능한 패널의 인덱스.

See:

getPanel(index){FlickingPanel | null}

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}

Return length of original panels.

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

Returns:
Type Description
number
Length of original panels.

원본 패널의 개수

getSize(){number}

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

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[]}

Return the panels currently shown in viewport area.

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

Returns:
Type Description
FlickingPanel[]
Panels currently shown in viewport area.

현재 뷰포트 영역에 보여지는 패널들

inherited hasOn(eventName){boolean}

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}

Return panel movement animation.

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

Returns:
Type Description
boolean
Is animating or not.

애니메이션 진행 여부.

moveTo(index, duration){eg.Flicking}

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}

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}

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}

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}

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[]}

Add new panels at the beginning of panels.

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

  • element

    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}

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[]}

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}

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[]}

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

    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>"])

Update panels to current state.

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

Returns:
Type Description
eg.Flicking
The instance itself.

인스턴스 자기 자신.

setLastIndex(index){eg.Flicking}

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:

setStatus(status){void}

Restore to the state of the status.

status의 상태로 복원한다.

  • status

    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}

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/offsetHeightgetBoundingClientRect 대신 사용할지 여부.
패널이나 뷰포트에 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}>

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

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:

contentError

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

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

Type:

holdEnd

Event triggered when user stopped dragging.

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

Type:

holdStart

Event triggered when user started dragging.

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

Type:

Event triggered while moving to the destination panel.

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

Type:

moveEnd

Event triggered after finish moving to the destination panel.

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

Type:

moveStart

Event triggered once before first move event.

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

Type:

needPanel

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

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

Type:

restore

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

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

Type:

select

Event triggered when user statically selected (clicked) panel.

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

Type:

visibleChange

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

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

Type:
comments powered by Disqus