Class: Flicking

eg. Flicking

new eg.Flicking(element, options)

A module used to implement flicking interactions. With this module, you can make flicking gestures, which are ways to navigate left and right to move between panels arranged side by side.

플리킹 UI를 구현하는 모듈. 나란히 배치한 패널을 쓸어 넘겨 다음 패널이나 이전 패널로 이동하는 플리킹 UI를 만들 수 있다.

  • element
    Type: HTMLElement | String | jQuery

    A base element for the eg.Flicking module

    eg.Flicking 모듈을 사용할 기준 엘리먼트

  • options
    Type: Object

    The option object of the eg.Flicking module

    eg.Flicking 모듈의 옵션 객체

    • hwAccelerable (default: eg.isHWAccelerable()) optional
      Type: Boolean

      Force hardware compositing

      하드웨어 가속 사용 여부

    • prefix (default: eg-flick) optional
      Type: String

      A prefix for class names of the panel elements

      패널 엘리먼트의 클래스 이름에 설정할 접두사

    • deceleration (default: 0.0006) optional
      Type: Number

      Deceleration of the animation where acceleration is manually enabled by user. A higher value indicates shorter running time

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

    • horizontal (default: true) optional
      Type: Boolean

      Direction of the panel movement (true: horizontal, false: vertical)

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

    • circular (default: false) optional
      Type: Boolean

      Indicates whether a circular panel is available

      패널 순환 여부

    • previewPadding (default: [0,0]) optional
      Type: Number | Array

      The preview size for the previous or next panel. If direction is set to "horizontal", the preview section will be displayed on the left and right of the panel. If direction is set to "vertical", it will be displayed on the top and bottom of the panel

      이전 패널과 다음 패널을 미리 보는 영역의 크기. 패널 이동 방향이 가로 방향이면 패널 왼쪽과 오른쪽에 미리 보는 영역이 나타난다. 패널 이동 방향이 세로 방향이면 패널 위쪽과 아래쪽에 미리 보는 영역이 나타난다

    • bounce (default: [10,10]) optional
      Type: Number | Array

      − The size of bouncing area. If a panel is set to "non-circulable", the start and end panels can exceed the base element area and move further as much as the bouncing area. If a panel is dragged to the bouncing area and then dropped, the panel where bouncing effects are applied is retuned back into the base element area.

      바운스 영역의 크기. 패널이 순환하지 않도록 설정됐다면 시작 패널과 마지막 패널은 기준 엘리먼트 영역을 넘어 바운스 영역의 크기만큼 더 이동할 수 있다. 패널을 바운스 영역까지 끌었다가 놓으면, 바운스 효과가 적용된 패널이 다시 기준 엘리먼트 영역 안으로 들어온다

    • threshold (default: 40) optional
      Type: Number

      Distance threshold. If the drag exceeds the threshold value, it will be changed to the next panel

      다음 패널로 바뀌는 기준 이동 거리. 패널을 기준 이동 거리 이상 끌었다 놓으면 패널이 다음 패널로 바뀐다

    • duration (default: 100) optional
      Type: Number

      Duration of the panel movement (unit: ms)

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

    • panelEffect (default: easeOutCubic) optional
      Type: function

      The easing function to apply to a panel moving animation

      패널 이동 애니메이션에 적용할 easing 함수

    • defaultIndex (default: 0) optional
      Type: Number

      The index number of a panel to be selected upon module initialization

      모듈이 초기화될 때 선택할 패널의 인덱스 번호

    • inputType optional
      Type: Array

      Types of input devices.
      - touch: A touch screen can be used to move a panel.
      - mouse: A mouse can be used to move a panel.

      입력 장치 종류.
      - touch: 터치 입력 장치로 패널을 이동할 수 있다.
      - mouse: 마우스로 패널을 이동할 수 있다.

    • thresholdAngle (default: 45) optional
      Type: Number

      The threshold value that determines whether user action is horizontal or vertical (0~90)

      사용자의 동작이 가로 방향인지 세로 방향인지 판단하는 기준 각도(0~90)

    • adaptiveHeight (default: false) optional
      Type: Boolean

      Set container's height be adaptive according panel's height.
      (Note: on Android 4.1.x stock browser, has rendering bug which not correctly render height value on panel with single node. To avoid just append another empty node at the end.)

      컨테이너 영역이 패널의 높이값에 따라 변경될지 여부
      (참고: Android 4.1.x 스톡 브라우저에서 단일 노드로 구성된 패널의 높이값 변경이 제대로 렌더링 되지 않는 버그가 있음. 비어있는 노드를 추가하면 해결이 가능하다.)

Example
     <!-- 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>
See:

Codepen:

플리킹 UI 기본 예제
Flicking UI default example

See the Pen eg.Flicking by egjs (@egjs) on CodePen.

Browser Support

Browser Version
Desktop - Internet Explorer 10+
Desktop - Chrome latest
Desktop - Firefox latest
Desktop - Safari latest
Desktop - Edge latest
iOS 7+
Andorid 2.3+ (except 3.x)

Extends

Methods

destroy()

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

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

disableInput(){eg.Flicking}

Disables input devices.

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

Returns:
Type Description
eg.Flicking
An instance of a module itself

모듈 자신의 인스턴스

Enables input devices.

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

Returns:
Type Description
eg.Flicking
An instance of a module itself

모듈 자신의 인스턴스

getAllElements(){jQuery}

Returns the references of whole panel elements.

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

Returns:
Type Description
jQuery
Whole panel elements

모든 패널 엘리먼트

getElement(){jQuery}

Returns the reference of the current panel element.

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

Returns:
Type Description
jQuery
Current element

현재 엘리먼트

getIndex(physical){Number}

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}

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}

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}

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}

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}

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}

    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}

    Checks whether the animated panel is playing.

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

    Returns:
    Type Description
    Boolean
    Indicates whether the animated panel is playing

    패널 이동 애니메이션 진행 중 여부

    moveTo(no, duration){eg.Flicking}

    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}

    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}

    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}

    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}

    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}

    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}

    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

    모듈 자신의 인스턴스

    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}

    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}

    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

    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

    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 좌표

    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

    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 참고

    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 참고)

    comments powered by Disqus