마이그레이션 가이드 (🔖2.x to 🔖3.x)

버젼 2.x에서 3.x로의 마이그레이션 가이드

이 문서는 플리킹을 2.x버젼에서 3.x버젼으로 마이그레이션하는 방법에 대해 설명합니다.

공통사항

• 패널은 이제 컨테이너에 의존적인 크기를 갖지 않고, 자기 자신의 크기를 사용합니다. 따라서, 기존과 같은 패널 크기를 유지하기 위해선 패널에 width: 100%를 설정해주셔야 합니다.

.eg-flick-panel {
  width: 100%;
}

• DOM 구조에서 .eg-flick-container는 삭제되고, .eg-flick-viewport와 .eg-flick-camera로 변경되었습니다.

<!--2.x->
<div id="flick">
  <div class="eg-flick-container">...</div>
</div>

<!--3.x-->
<div id="flick">
  <div class="eg-flick-viewport">
    <div class="eg-flick-camera">...</div>
  </div>
</div>

옵션

hwAccelerable

• ❌삭제되었습니다. 플리킹이 3.x버젼부터는 안드로이드 2.x버젼을 지원하지 않기 때문에, 하드웨어 가속이 가능한지 체크는 자동적으로 이루어집니다.

prefix

• classPrefix로 이름이 변경되었습니다.

previewPadding

• ❌삭제되었습니다. 하지만, 동일한 UI를 약간의 CSS와 overflow 옵션을 이용해서 구현하실 수 있습니다.

previePadding: [80, 80]과 동일한 UI를 얻기 위해서는, 먼저 플리킹 래퍼에 다음과 같은 CSS를 설정해줍니다.

#flick {
  padding-left: 80px;
  padding-right: 80px;
  overflow: hidden;
}

그리고, 플리킹을 초기화할 때 overflow: true 옵션을 사용해주시면 됩니다.

new eg.Flicking("#flick", {
  overflow: true;
});

thresholdAngle

• 2.x버젼과 달리, 이 옵션은 사용자 입력의 각도를 제한하기 위해 사용됩니다..

adaptiveHeight

• adaptive로 이름이 변경되었습니다. 이젠 수직 플리킹의 경우에 너비를 adaptive하게 적용하는 데도 사용할 수 있기 때문입니다.

useTranslate

• ❌삭제되었습니다. 이제 카메라를 이동할때는 left가 아닌 항상 translate를 사용하기 떄문입니다.

정적 상수

DIRECTION_*

• 모든 방향 관련 정적 상수들은 제거되었습니다. 대신에, 상/하 또는 좌/우 구분을 용이하게 하실 수 있도록 단일화한 정적 상수 DIRECTION을 사용하실 수 있습니다.
• All direction related static constants is removed. Instead, you can use static constant DIRECTION which offers PREV and NEXT.

멤버 변수

plugins

• ❌삭제되었습니다. addPlugins과 removePlugins를 대신 사용하실 수 있습니다. 아래의 Plugins항목을 참조해주세요.

Methods

getElement, getAllElements

• Deprecated. You can use getElement method from FlickingPanel instance instead.

// getElement
flicking.getPanel(index).getElement();

// getAllElements
flicking.getAllPanels().map(panel => panel.getElement());

getNextElement, getNextIndex

• ❌Deprecated. You can use next method from FlickingPanel instance instead.

const nextPanel = flicking.getPanel(index).next();
// getNextIndex
const nextIndex = nextPanel ? nextPanel.getIndex() : -1;
// getNextElement
const nextElement = nextPanel ? nextPanel.getElement() : null;

getPrevElement, getPrevIndex

• ❌Deprecated. You can use prev method from FlickingPanel instance instead.

const prevPanel = flicking.getPanel(index).prev();
// getPrevIndex
const prevIndex = prevPanel ? prevPanel.getIndex() : -1;
// getPrevElement
const prevElement = prevPanel ? prevPanel.getElement() : null;

plugin

• ❌Deprecated. You can use addPlugins instead.

restore

• ❌Deprecated. You can use getCurrentPanel with focus instead.

// Same to restore()
flicking.getCurrentPanel().focus(300);

Events

The event flow has significantly changed. Check the below diagram & instructions for details.

beforeFlickStart

• ❌Deprecated. You should use change event instead.

beforeRestore

• Changed name to restore.
  • parameter eventType changed the name to type.
  • parameter no changed the name to index.
  • parameter depaPos and destPos is ❌deprecated. You can use axesEvent parameter instead.
  • parameter direction's value is now either "prev" or "next".
    • "prev" is same to eg.Flicking.DIRECTION.PREV, "next" is same to eg.Flicking.DIRECTION.NEXT.

flick

• Changed name to move.
  • parameter eventType changed the name to type.
  • parameter no changed the name to index.
  • parameter pos and distance is ❌deprecated. You can use axesEvent parameter instead.
  • parameter direction's value is now either "prev" or "next".
    • "prev" is same to eg.Flicking.DIRECTION.PREV, "next" is same to eg.Flicking.DIRECTION.NEXT.

flickEnd

• Changed name to moveEnd.
  • parameter eventType changed the name to type.
  • parameter no changed the name to index.
  • parameter direction's value is now either "prev" or "next".
    • "prev" is same to eg.Flicking.DIRECTION.PREV, "next" is same to eg.Flicking.DIRECTION.NEXT.

restore

• ❌Deprecated. You should use moveEnd event instead.

Plugins

All plugins are now in a separate repository. You can follow the instruction in that repository to use plugins for Flicking. Now you have to call addPlugins or removePlugins to add/remove plugins.

flicking.addPlugins(new eg.Flicking.plugins.Parallax("img", 4));