Flicking(options)

new Flicking(options)

Parameters:
Name Type Description
options obejct
Properties
Name Type Attributes Default Description
element HTMLElement

Container element

wrapper HTMLElement

Wrapper element that include flicking items

flow string <optional>

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

circular boolean <optional>

Whether use circular flicking or not

useMagnetic boolean <optional>

Whether magnetic use or not

effect string <optional>

Type of animation

flickRange number <optional>

Minimum range of flicking

duration number <optional>

Duration for animation

itemClass string <optional>
'panel'

Class name of each item element

itemTag string <optional>
'div'

Node type of each item element

data string <optional>

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

usageStatistics boolean <optional>
true

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

Example
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>'
});

Methods

setNext(data)

Set next panel

Parameters:
Name Type Description
data string

A data of flicking

setPrev(data)

Set prev panel

Parameters:
Name Type Description
data string

A data of flicking

Events

afterFlick

Parameters:
Name Type Description
ev object
Properties
Name Type Description
dest number

Destination value

dist number

Distance value

way string

"backward", "forward"

cover boolean

Cover state

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

beforeMove

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

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

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

returnFlick

Parameters:
Name Type Description
ev object
Properties
Name Type Description
dest number

Destination value

dist number

Distance value

way string

"backward", "forward"

cover boolean

Cover state

recover boolean

Recover state

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