logo

/Rolling|v2.2.1

Class

new Rolling(options, data)rolling.jsline 44

Rolling core object

PARAMETERS
NameTypeDescription

options

Object

The options

PROPERTIES
NameTypeDescription

element

HTMLElementString

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

isVariable

Boolean = true|false

Whether the data is changable or not default value is false

isCircular

Boolean = true|false

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

isAuto

Boolean = true|false

Whether auto rolling or not default value is false

usageStatistics

Boolean = true|false

send hostname to google analytics default value is true

delayTime

Number = 1000|...

Distance time of auto rolling. defulat 3 second

direction

Number = 'horizontal|vertical'

The flow direction panel default value is horizontal

duration

Number = '1000|...

A move duration

initNum

Number = '0|...

Initalize selected rolling panel number

motion

String = 'linear|[quad]easeIn|[quad]easeOut|[quad]easeInOut|circEaseIn|circEaseOut|circEaseInOut

A effect name default value is noeffect

unit

String = 'item|page'

A unit of rolling

wrapperTag

String = 'ul.className|div.className'

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

panelTag

String = 'li.className'

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

data

ArrayString

A data of rolling panels

EXAMPLES
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>']);

Instance Methods

auto()rolling.jsline 234

Start auto rolling

EXAMPLES
rolling.auto();

moveTo(page)rolling.jsline 174

Move to target page

PARAMETERS
NameTypeDescription

page

Number

A target page

EXAMPLES
rolling.moveTo(3);

roll(data, flow)rolling.jsline 125

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

PARAMETERS
NameTypeDescription

data

String

A rolling data

flow

[ String ]

A direction rolling

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

setFlow(flow)rolling.jsline 162

Set direction

PARAMETERS
NameTypeDescription

flow

String

A direction of rolling

EXAMPLES
rolling.setFlow('horizontal');

stop()rolling.jsline 225

Stop auto rolling

Events

afterMoveroller.jsline 313

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

beforeMoveroller.jsline 222

PROPERTIES
NameTypeDescription

data

String

Inner HTML

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