logo

/Flicking|v2.1.5

Class

new Flicking(options)flicking.jsline 46

PARAMETERS
NameTypeDescription

options

obejct

PROPERTIES
NameTypeDescription

element

HTMLElement

Container element

wrapper

HTMLElement

Wrapper element that include flicking items

flow

[ string ]

Type of flicking ('horizontal'|'vertical')

circular

[ boolean ]

Whether use circular flicking or not

useMagnetic

[ boolean ]

Whether magnetic use or not

effect

[ string ]

Type of animationhttps://github.com/nhn/tui.animation

flickRange

[ number ]

Minimum range of flicking

duration

[ number ]

Duration for animation

itemClass

string = 'panel'

Class name of each item element

itemTag

string = 'div'

Node type of each item element

data

[ string ]

Set first item when items are created using custom event and public APIs

usageStatistics

boolean = true

Send the hostname to google analytics.
If you do not want to send the hostname, this option set to false.

EXAMPLES
var Flicking = tui.Flicking; // or require('tui-flicking');
var instance = new Flicking({
     element: document.getElementById('flick'),
     wrapper: document.getElementById('flick-panels'),
     flow: 'horizontal',
     circular: true,
     useMagnetic: true,
     effect: 'linear',
     flickRange: 100,
     duration: 300,
     itemClass: 'panel',
     itemTag: 'div',
     data: '<strong class="contents">panel</strong>'
});

Instance Methods

setNext(data)flicking.jsline 427

Set next panel

PARAMETERS
NameTypeDescription

data

string

A data of flicking

setPrev(data)flicking.jsline 415

Set prev panel

PARAMETERS
NameTypeDescription

data

string

A data of flicking

Events

afterFlickflicking.jsline 621

PROPERTIES
NameTypeDescription

dest

number

Destination value

dist

number

Distance value

way

string

"backward", "forward"

cover

boolean

Cover state

EXAMPLES
instance.on('afterFlick', function(ev) {
    console.log(ev.way);
});

beforeMoveflicking.jsline 300

EXAMPLES
instance.on('beforeMove', function() {
    var left = getData('left');
    var right = getData('right');

    instance.setPrev(left);
    instance.setNext(right);

    document.getElementById('move').innerHTML = 'beforeMove';
});

returnFlickflicking.jsline 636

PROPERTIES
NameTypeDescription

dest

number

Destination value

dist

number

Distance value

way

string

"backward", "forward"

cover

boolean

Cover state

recover

boolean

Recover state

EXAMPLES
instance.on('returnFlick', function(ev) {
    console.log(ev.way);
});
Resizable