logo

/Rolling|v2.2.5

Class

new Rolling(options, data)rolling.jsline 54

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
// ES6
import Rolling from 'tui-rolling';

// CommonJS
const Rolling = require('tui-rolling');

// Browser
const Rolling = tui.Rolling;

const 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 246

Start auto rolling

EXAMPLES
rolling.auto();

moveTo(page)rolling.jsline 186

Move to target page

PARAMETERS
NameTypeDescription

page

Number

A target page

EXAMPLES
rolling.moveTo(3);

roll(data, flow)rolling.jsline 137

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 174

Set direction

PARAMETERS
NameTypeDescription

flow

String

A direction of rolling

EXAMPLES
rolling.setFlow('horizontal');

stop()rolling.jsline 237

Stop auto rolling

Events

afterMoveroller.jsline 326

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

beforeMoveroller.jsline 235

PROPERTIES
NameTypeDescription

data

String

Inner HTML

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