English Version

Load required files

...
<script type="text/javascript" src="code-snippet.js"></script>
<script type="text/javascript" src="component-effect-slide.js"></script>
<script type="text/javascript" src="component-gesture-flick.js"></script>
<script type="text/javascript" src="component-m-flicking.js"></script>
...

There are 3 files that you need to use flicking component.
First, FE code snippet(code-snippet) that is library,
second, Effect slide(component-effect-slide) that support to slide effect such as linear, easeIn,
and Gesture reader(component-gesture-reader) that support to read touch event position and return figured whether flick or not.

After 3 files load, create flicking instance.

Create flicking component

You can create flicking component with next options.

Name	Feature
element	A root element
wrapper	A wrapper element that include flicking items
flow	A flicking flow
isCircular	Whether use circular flicking or not
isFixedHTML	Whether flicking item is fix or not(load new data when touch start to flicking)
itemClass : A class for flicking items
data	A data that are needed, what if isFixedHTML option is false
flickRange	A minimum distance that conclude flicking
effect	A name of effect
duration	A duration for effect

<div id="flick" class="flick">
    <div id="flick-wrap1" class="panelwrap">
    </div>
</div>

There are required css that for flicking action.
The root element should have overflow:hidden style and the wrapper element should have position:absolute.

// Create
    var flick = new tui.component.m.Flicking({
        element: document.getElementById('flick'), // element(mask element)
        wrapper: document.getElementById('flick-wrap1'), // warpper
        flow: 'horizontal', // direction ('horizontal|vertical)
        isMagnetic: true, // use magnetic
        isCircular: true, // circular
        isFixedHTML: false, // fixed HTML
        itemClass: 'item', // item(panel) class
        data: '<strong style="color:white;display:block;text-align:center;margin-top:100px">item</strong>', // item innerHTML
        flickRange: 100, // flickRange(Criteria to cognize)
        effect: 'linear', // effect(default linear)
        duration: 300 // animation duration
    });

You can create flicking instance with this code.

Data change

This component support to change data, if you want to change when flicking event fire.
See, next code.

    var leftcount = 0,
        rightcount = 0;
    function getData(str) {
        var count = (str === 'left') ? leftcount++ : rightcount++;
        return '<strong style="color:white;display:block;text-align:center;margin-top:100px">item' + str + count + '</strong>';
    }
    flick.on('beforeMove', function() {
        var left = getData('left');
        var right = getData('right');
        flick.setPrev(left);
        flick.setNext(right);
        document.getElementById('move').innerHTML = 'beforeMove';
    });
    flick.on('afterFlick', function(data) {
        if (data.way === 'forward') {
            leftcount -= 1;
        } else if (data.way === 'back') {
            rightcount -= 1;
        }
        console.log(leftcount, rightcount)
        document.getElementById('move').innerHTML = 'after Flicking';
    });
    flick.on('returnFlick', function(data) {
        leftcount -= 1;
        rightcount -= 1;
    });

You can get different data when you flick element via custom event.

Notice

• Flicking component do not work without 3 files.
  • code-snippet
  • component-gesture-reader
  • component-effect-slide