Class: Flicking

     <!-- HTML -->
    <div id="mflick">
        <div>
            <p>Layer 0</p>
        </div>
        <div>
            <p>Layer 1</p>
        </div>
        <div>
            <p>Layer 2</p>
        </div>
    </div>
    <script>
     var some = new eg.Flicking("#mflick", {
            circular : true,
            threshold : 50
        }).on({
            beforeRestore : function(e) { ... },
            flickStart : function(e) { ... }
        });
     </script>

Extends

• eg.Component

Methods

destroy()

flicking.js, line 1532

Destroys elements, properties, and events used in a panel.

패널에 사용한 엘리먼트와 속성, 이벤트를 해제한다

disableInput(){eg.Flicking}

flicking.js, line 1521

Disables input devices.

입력 장치를 사용할 수 없게 한다.

Returns:

Type	Description
eg.Flicking	An instance of a module itself 모듈 자신의 인스턴스

enableInput(){eg.Flicking}

flicking.js, line 1510

Enables input devices.

입력 장치를 사용할 수 있게 한다

Returns:

Type	Description
eg.Flicking	An instance of a module itself 모듈 자신의 인스턴스

getAllElements(){jQuery}

flicking.js, line 1216

Returns the references of whole panel elements.

패널을 구성하는 모든 엘리먼트의 레퍼런스를 반환한다

Returns:

Type	Description
jQuery	Whole panel elements 모든 패널 엘리먼트

getElement(){jQuery}

flicking.js, line 1184

Returns the reference of the current panel element.

현재 패널 엘리먼트의 레퍼런스를 반환한다

Returns:

Type	Description
jQuery	Current element 현재 엘리먼트

getIndex(physical){Number}

flicking.js, line 1173

Returns the index number of the current panel element.

현재 패널 엘리먼트의 인덱스 번호를 반환한다

• physical (default: false) optional
  Type: Boolean

  Types of index numbers
  - true: Indicates physical index numbers relative to DOM.
  - false: Indicates logical index numbers relative to the panel content.

  − 인덱스 번호의 종류
  - true: 물리적 인덱스 번호. DOM 엘리먼트를 기준으로 하는 인덱스 번호다.
  - false: 논리적 인덱스 번호. 패널 콘텐츠를 기준으로 하는 인덱스 번호다.

Returns:

Type	Description
Number	Index number of the current panel element 현재 패널의 인덱스 번호

getNextElement(){jQuery|null}

flicking.js, line 1195

Returns the reference of the next panel element.

다음 패널 엘리먼트의 레퍼런스를 반환한다.

Returns:

Type	Description
jQuery | null	Next panel element or null if it does not exist. 다음 패널 엘리먼트. 패널이 없으면 'null'을 반환한다.

getNextIndex(physical){Number|null}

flicking.js, line 1205

Returns the index number of the next panel element.

다음 패널 엘리먼트의 인덱스 번호를 반환한다

• physical (default: false) optional
  Type: Boolean

  Types of index numbers
  - true: Indicates physical index numbers relative to DOM.
  - false: Indicates logical index numbers relative to the panel content.

  − 인덱스 번호의 종류
  - true: 물리적 인덱스 번호. DOM 엘리먼트를 기준으로 하는 인덱스 번호다.
  - false: 논리적 인덱스 번호. 패널 콘텐츠를 기준으로 하는 인덱스 번호다.

Returns:

Type	Description
Number | null	Index number of the next panel element or null if it does not exist. 다음 패널 엘리먼트의 인덱스 번호. 패널이 없으면 'null'을 반환한다

getPrevElement(){jQuery|null}

flicking.js, line 1226

Returns the reference of the previous panel element.

이전 패널 엘리먼트의 레퍼런스를 반환한다.

Returns:

Type	Description
jQuery | null	Previous panel element or null if it does not exist. 이전 패널 엘리먼트. 패널이 없으면 'null'을 반환한다

getPrevIndex(physical){Number|null}

flicking.js, line 1236

Returns the index number of the previous panel element.

이전 패널 엘리먼트의 인덱스 번호를 반환한다

• physical (default: false) optional
  Type: Boolean

  Types of index numbers
  - true: Indicates physical index numbers relative to DOM.
  - false: Indicates logical index numbers relative to the panel content.

  − 인덱스 번호의 종류
  - true: 물리적 인덱스 번호. DOM 엘리먼트를 기준으로 하는 인덱스 번호다.
  - false: 논리적 인덱스 번호. 패널 콘텐츠를 기준으로 하는 인덱스 번호다.

Returns:

Type	Description
Number | null	Previous element index value or null if no more element exist 이전 패널 인덱스 번호. 패널이 없는 경우에는 null

getTotalCount(physical){Number}

flicking.js, line 1247

Returns the total number of whole panel elements.

전체 패널 엘리먼트의 개수를 반환한다

• physical (default: false) optional
  Type: Boolean

  Number of elements relative to (true: DOM, false: panel content)

  엘리먼트 개수의 기준(true: DOM 엘리먼트 기준, false: 패널 콘텐츠 기준)

Returns:

Type	Description
Number	Total number of whole panel elements 모든 패널 엘리먼트의 개수

Deprecated

• since 1.3.0

inherited hasOn(eventName){Boolean}

component.js, line 165

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

        var Some = eg.Class.extend(eg.Component,{
            "some": function(){
                this.hasOn("hi");// check hi event.
            }
        });

isPlaying(){Boolean}

flicking.js, line 1259

Checks whether the animated panel is playing.

패널 이동 애니메이션이 진행 중인지 확인한다.

Returns:

Type	Description
Boolean	Indicates whether the animated panel is playing 패널 이동 애니메이션 진행 중 여부

moveTo(no, duration){eg.Flicking}

flicking.js, line 1333

Moves an element to the indicated panel.

지정한 패널로 이동한다.

• no
  Type: Number

  Logical index number of the target panel element, which is relative to the panel content.

  이동할 패널 엘리먼트의 논리적 인덱스 번호. 패널 콘텐츠를 기준으로 하는 인덱스 번호다

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

  Duration of the panel movement (unit: ms)

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

Returns:

Type	Description
eg.Flicking	An instance of a module itself 모듈 자신의 인스턴스

next(duration){eg.Flicking}

flicking.js, line 1311

Moves an element to the next panel.

다음 패널로 이동한다.

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

  Duration of the panel movement (unit: ms)

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

Returns:

Type	Description
eg.Flicking	An instance of a module itself 모듈 자신의 인스턴스

inherited off(eventName, handlerToDetach){eg.Component}

component.js, line 218

Detaches an event from the component.

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

• eventName
  Type: eventName

  The name of the event to be detached

  해제할 이벤트의 이름

• handlerToDetach
  Type: function

  The handler function of the event to be detached

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

Returns:

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

Example

        var Some = eg.Class.extend(eg.Component,{
            "hi": function(){},
            "some": function(){
                this.off("hi",this.hi); //detach event
            }
        });

inherited on(eventName, handlerToAttach){eg.Component}

component.js, line 181

Attaches an event to a component.

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

• eventName
  Type: eventName

  The name of the event to be attached

  등록할 이벤트의 이름

• handlerToAttach
  Type: function

  The handler function of the event to be attached

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

Returns:

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

Example

        var Some = eg.Class.extend(eg.Component,{
            "hi": function(){},
            "some": function(){
                this.on("hi",this.hi); //attach event
            }
        });

inherited once(eventName, handlerToAttach){eg.Component}

component.js, line 120

Executed event just one time.

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

• eventName
  Type: eventName

  The name of the event to be attached

  등록할 이벤트의 이름

• handlerToAttach
  Type: function

  The handler function of the event to be attached

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

Returns:

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

Example

        var Some = eg.Class.extend(eg.Component,{
            "hi": function(){
                alert("hi");
            },
            "thing": function(){
                this.once("hi",this.hi);
            }
        });

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

inherited option(key, value){eg.Component|Object}

component.js, line 25

Sets options in a component or returns them.

컴포넌트에 옵션을 설정하거나 옵션을 반환한다

• key
  Type: String

  The key of the option

  옵션의 키

• value optional
  Type: Object

  The option value that corresponds to a given key

  키에 해당하는 옵션값

Returns:

Type

Description

eg.Component | Object

An instance, an option value, or an option object of a component itself. - If both key and value are used to set an option, it returns an instance of a component itself. - If only a key is specified for the parameter, it returns the option value corresponding to a given key. - If nothing is specified, it returns an option object. 컴포넌트 자신의 인스턴스나 옵션값, 옵션 객체. - 키와 값으로 옵션을 설정하면 컴포넌트 자신의 인스턴스를 반환한다. - 파라미터에 키만 설정하면 키에 해당하는 옵션값을 반환한다. - 파라미터에 아무것도 설정하지 않으면 옵션 객체를 반환한다.

Example

        var Some = eg.Class.extend(eg.Component, {
            construct: function(options){
                this.options = options; // You have to set this.options.
            }
        });

        var some = new Some({
            "foo": 1,
            "bar": 2,
        });
        some.option("foo"); // return 1
        some.option("foo",3); // return some instance
        some.option(); // return options object.
        some.option({
            "foo" : 10,
            "bar" : 20,
            "baz" : 30
        }); // return some instance.

prev(duration){eg.Flicking}

flicking.js, line 1322

Moves an element to the previous panel.

이전 패널로 이동한다.

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

  Duration of the panel movement (unit: ms)

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

Returns:

Type	Description
eg.Flicking	An instance of a module itself 모듈 자신의 인스턴스

resize(){eg.Flicking}

flicking.js, line 1406

Updates the size of the panel.

패널의 크기를 갱신한다

Returns:

Type	Description
eg.Flicking	An instance of a module itself 모듈 자신의 인스턴스

Example

        var some = new eg.Flicking("#mflick", {
                previewPadding: [10,10]
            });

        // when device orientaion changes
        some.resize();

        // or when changes previewPadding option from its original value
        some.options.previewPadding = [20, 30];
        some.resize();

restore(duration){eg.Flicking}

flicking.js, line 1463

Restores an element to its original position when it movement stops while the element is not dragged until a certain distance threshold is reached.

다음 패널로 바뀌기 전에 패널 이동이 멈췄을 때 원래 패널로 복원한다

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

  Duration of the panel movement (unit: ms)

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

Returns:

Type	Description
eg.Flicking	An instance of a module itself 모듈 자신의 인스턴스

Example

        var some = new eg.Flicking("#mflick").on({
                beforeFlickStart : function(e) {
                    if(e.no === 2) {
                        e.stop();  // stop flicking
                        this.restore(100);  // restoring to previous position
                    }
                }
            );

inherited trigger(eventName, customEvent){Boolean}

component.js, line 72

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

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

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. 이벤트 발생 여부. 커스텀 이벤트 핸들러에서 stop() 메서드를 호출하면 'false'를 반환하고 이벤트 발생을 중단한다.

Example

        var Some = eg.Class.extend(eg.Component,{
            "some": function(){
                this.trigger("hi");// fire hi event.
            }
        });

Events

beforeFlickStart

flicking.js, line 894

This event is fired before flicking starts

플리킹이 시작하기 전에 발생하는 이벤트

• param
  Type: Object

  The object of data to be sent to an event

  이벤트에 전달되는 데이터 객체

  • eventType
    Type: String

    The name of the event

    이름명

  • index
    Type: Number

    Physical index number of the current panel element, which is relative to DOM. (@deprecated since 1.3.0)

    현재 패널 엘리먼트의 물리적 인덱스 번호. DOM 엘리먼트를 기준으로 하는 인덱스 번호다 (@deprecated since 1.3.0)

  • no
    Type: Number

    Logical index number of the current panel element, which is relative to the panel content.

    현재 패널 엘리먼트의 논리적 인덱스 번호. 패널 콘텐츠를 기준으로 하는 인덱스 번호다

  • direction
    Type: Number

    Direction of the movement (see eg.MovableCoord.DIRECTION* constant)

    − 이동 방향(eg.MovableCoord.DIRECTION* constant 참고)

  • depaPos
    Type: Array

    Start coordinate

    출발점 좌표

    • 0
      Type: Number

      x-coordinate

      x 좌표

    • 1
      Type: Number

      y-coordinate

      y 좌표

  • destPos
    Type: Array

    End coordinate

    도착점 좌표

    • 0
      Type: Number

      x-coordinate

      x 좌표

    • 1
      Type: Number

      y-coordinate

      y 좌표

beforeRestore

flicking.js, line 834

This event is fired before an element is restored to its original position when user action is done while the element is not dragged until a certain distance threshold is reached

다음 패널로 바뀌는 기준 이동 거리만큼 이동하기 전에 사용자의 동작이 끝났을 때 원래 패널로 복원되기 전에 발생하는 이벤트

• param
  Type: Object

  The object of data to be sent to an event

  이벤트에 전달되는 데이터 객체

  • eventType
    Type: String

    The name of the event

    이름명

  • index
    Type: Number

    Physical index number of the current panel element, which is relative to DOM. (@deprecated since 1.3.0)

    현재 패널 엘리먼트의 물리적 인덱스 번호. DOM 엘리먼트를 기준으로 하는 인덱스 번호다. (@deprecated since 1.3.0)

  • no
    Type: Number

    Logical index number of the current panel element, which is relative to the panel content.

    현재 패널 엘리먼트의 논리적 인덱스 번호. 패널 콘텐츠를 기준으로 하는 인덱스 번호다

  • direction
    Type: Number

    Direction of the movement (see eg.MovableCoord.DIRECTION* constant)

    이동 방향(eg.MovableCoord.DIRECTION* constant 참고)

  • depaPos
    Type: Array

    Start coordinate

    출발점 좌표

    • 0
      Type: Number

      x-coordinate

      x 좌표

    • 1
      Type: Number

      y-coordinate

      y 좌표

  • destPos
    Type: Array

    End coordinate

    도착점 좌표

    • 0
      Type: Number

      x-coordinate

      x 좌표

    • 1
      Type: Number

      y-coordinate

      y 좌표

flick

flicking.js, line 670

This event is fired when panel moves.

패널이 이동할 때 발생하는 이벤트

• param
  Type: Object

  The object of data to be sent to an event

  이벤트에 전달되는 데이터 객체

  • eventType
    Type: String

    The name of the event

    이름명

  • index
    Type: Number

    Physical index number of the current panel element, which is relative to DOM (@deprecated since 1.3.0)

    현재 패널 엘리먼트의 물리적 인덱스 번호. DOM 엘리먼트를 기준으로 하는 인덱스 번호다 (@deprecated since 1.3.0)

  • no
    Type: Number

    Logical index number of the current panel element, which is relative to the panel content

    현재 패널 엘리먼트의 논리적 인덱스 번호. 패널 콘텐츠를 기준으로 하는 인덱스 번호다

  • direction
    Type: Number

    Direction of the movement (see eg.MovableCoord.DIRECTION* constant)

    이동 방향(eg.MovableCoord.DIRECTION* constant 참고)

  • pos
    Type: Array

    Start coordinate

    출발점 좌표

    • 0
      Type: Number

      x-coordinate

      x 좌표

    • 1
      Type: Number

      y-coordinate

      y 좌표

  • holding
    Type: Boolean

    Indicates whether a user holds an element on the screen of the device.

    사용자가 기기의 화면을 누르고 있는지 여부

  • distance
    Type: Number

    Distance moved from then starting point. According the move direction, positive on eg.MovableCoord.DIRECTION_LEFT/UP and negative on eg.MovableCoord.DIRECTION_RIGHT/DOWN

    시작점부터 이동된 거리의 값. 이동 방향에 따라 eg.MovableCoord.DIRECTION_LEFT/UP의 경우 양수를 eg.MovableCoord.DIRECTION_RIGHT/DOWN의 경우는 음수를 반환

flickEnd

flicking.js, line 926

This event is fired after panel moves.

패널이 이동한 다음 발생하는 이벤트

• param
  Type: Object

  The object of data to be sent to an event

  이벤트에 전달되는 데이터 객체

  • eventType
    Type: String

    The name of the event

    이름명

  • index
    Type: Number

    Physical index number of the current panel element, which is relative to DOM (@deprecated since 1.3.0)

    현재 패널 엘리먼트의 물리적 인덱스 번호. DOM 엘리먼트를 기준으로 하는 인덱스 번호다 (@deprecated since 1.3.0)

  • no
    Type: Number

    Logical index number of the current panel element, which is relative to the panel content.

    현재 패널 엘리먼트의 논리적 인덱스 번호. 패널 콘텐츠를 기준으로 하는 인덱스 번호다.

  • direction
    Type: Number

    Direction of the movemen (see eg.MovableCoord.DIRECTION* constant)

    − 이동 방향(eg.MovableCoord.DIRECTION* constant 참고

restore

flicking.js, line 868

This event is fired after an element is restored to its original position when user action is done while the element is not dragged until a certain distance threshold is reached.

다음 패널로 바뀌는 기준 이동 거리만큼 이동하기 전에 사용자의 동작이 끝났을 때 원래 패널로 복원된 다음 발생하는 이벤트

• param
  Type: Object

  The object of data to be sent to an event

  이벤트에 전달되는 데이터 객체

  • eventType
    Type: String

    The name of the event

    이름명

  • index
    Type: Number

    Physical index number of the current panel element, which is relative to DOM(@deprecated since 1.3.0)

    현재 패널 엘리먼트의 물리적 인덱스 번호. DOM 엘리먼트를 기준으로 하는 인덱스 번호다 (@deprecated since 1.3.0)

  • no
    Type: Number

    Logical index number of the current panel element, which is relative to the panel content.

    현재 패널 엘리먼트의 논리적 인덱스 번호. 패널 콘텐츠를 기준으로 하는 인덱스 번호다

  • direction
    Type: Number

    Direction of the panel move (see eg.MovableCoord.DIRECTION* constant)

    이동 방향(eg.MovableCoord.DIRECTION* constant 참고)