Migration Guide (🔖2.x to 🔖3.x)

Migration Guide from version v2.x

This document explains how to migrate your Flicking from v2.x to v3.x

HTML Structure

• Panel width is not dependent on wrapper size in v3.x, so you have to set width: 100% manually.

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

• .eg-flick-container no longer exists, replaced by .eg-flick-viewport and .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>

Options

hwAccelerable

• ❌Deprecated. As Flicking won't support for Android 2.x anymore, hwAccelerable check is done automatically.

prefix

• Changed name to classPrefix

previewPadding

• ❌Deprecated, but you can achieve same UI with a few CSS and overflow option.

To achieve the same effect of previewPadding: [80, 80], first in Flicking wrapper

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

Then give flicking an option overflow: true.

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

Also, there's a demo for this option.

thresholdAngle

• Unlike in 2.x, this option is for restricting the angle of user input.

adaptiveHeight

• Changed name to adaptive, as it can now set adaptive width for vertical Flicking.

useTranslate

• ❌Deprecated

Static constants

DIRECTION_*

• All direction related static constants is removed. Instead, you can use static constant DIRECTION which offers PREV and NEXT.

Member variables

plugins

• ❌Deprecated, use addPlugins and removePlugins instead.

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.

When	2.x	3.x
When user input started	-	holdStart
When user input ended	-	holdEnd
Before first move event	-	moveStart
When Flicking moves	flick	move
When animation ends	flickEnd	moveEnd
Before animation start	beforeFlickStart	-(change event is triggered on same timing)
Before changing panel	-	change
Before restore	beforeRestore	restore

Also, you can check the events demo to see how it actually works.

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));