Rolling(options, data)

new Rolling(options, data)

Rolling core object

Parameters:
Name Type Description
options Object

The options

Properties
Name Type Attributes Default Description
element HTMLElement | String

A root element or id that will become root element's

isVariable Boolean <optional>
true|false

Whether the data is changable or not [default value is false]

isCircular Boolean <optional>
true|false

Whether circular or not [default value is true but isVariable true case]

isAuto Boolean <optional>
true|false

Whether auto rolling or not [default value is false]

usageStatistics Boolean <optional>
true|false

send hostname to google analytics [default value is true]

delayTime Number <optional>
1000|...

Distance time of auto rolling. [defulat 3 second]

direction Number <optional>
'horizontal|vertical'

The flow direction panel [default value is horizontal]

duration Number <optional>
'1000|...

A move duration

initNum Number <optional>
'0|...

Initalize selected rolling panel number

motion String <optional>
'linear|[quad]easeIn|[quad]easeOut|[quad]easeInOut|circEaseIn|circEaseOut|circEaseInOut

A effect name [default value is noeffect]

unit String <optional>
'item|page'

A unit of rolling

wrapperTag String <optional>
'ul.className|div.className'

A tag name for panel warpper, connect tag name with class name by dots. [defualt value is ul]

panelTag String <optional>
'li.className'

A tag name for panel, connect tag name with class by dots [default value is li]

data Array | String

A data of rolling panels

Example
var Rolling = tui.Rolling; // or require('tui-rolling')
var instance = new tui.Rolling({
     element: document.getElementById('rolling'),
     initNum: 0,
     direction: 'horizontal',
     isVariable: true,
     unit: 'page',
     isAuto: false,
     motion: 'easeInOut',
     duration: 2000
}, ['<div>data1</div>','<div>data2</div>', '<div>data3</div>']);

Methods

auto()

Start auto rolling

Example
rolling.auto();

moveTo(page)

Move to target page

Parameters:
Name Type Description
page Number

A target page

Example
rolling.moveTo(3);

roll(data, flowopt)

Roll the rolling component. If there is no data, the component have to have with fixed data

Parameters:
Name Type Attributes Description
data String

A rolling data

flow String <optional>

A direction rolling

Example
rolling.roll('<div>data</div>', 'horizontal');

setFlow(flow)

Set direction

Parameters:
Name Type Description
flow String

A direction of rolling

Example
rolling.setFlow('horizontal');

stop()

Stop auto rolling

Events

afterMove

Example
instance.on('afterMove', function() {
    // code
});

beforeMove

Parameters:
Name Type Description
ev object

Custom event object

Properties
Name Type Description
data String

Inner HTML

Example
instance.on('beforeMove', function(ev) {
    console.log(ev.data)
});