Roller

jQuery

About ↑ Back to top

Roller was designed to support both static and dynamic content within its panels. A wide range of features make it very customisable and flexible for a variety of uses, from a simple automated slideshow to an advanced interactive showcaser.

Features ↑ Back to top

  • Declare an element the Roller and its children will automatically be set up as panels
  • Wide variety of panel transitions: Fade, Slide (X and Y axis), Colour Flash
  • Customisable panel navigation
  • Auto-roll with options to pause on mouseenter
  • Support for triggering functions on Roller-specific events
  • Base CSS styles with support for CSS and HTML front-end customisation
  • Compatible in Firefox, Safari, Chrome and IE6+

Known Issues ↑ Back to top

  • None reported so far

Release Log ↑ Back to top

v0.1

  • First release of the Roller plugin

API ↑ Back to top

Settings ↑ Back to top

Default values

width:                  'auto',
height:                 'auto',
autoRoll:               1,
autoRollLength:         5000,
autoRollPauseOnHover:   0,
animType:               'slide',
animLength:             1000,
animFlashColor:         '#ffffff',
buildNav:               [ 'prev', 'index', 'next' ],
startOnItemIndex:       0,
onrollend:              function(){},
onautorollstart:        function(){},
onautorollstop:         function(){}

width: auto | integer

The width of the Roller area in pixels.
Default: auto

height: auto | integer

The height of the Roller area in pixels.
Default: auto

autoRoll: boolean

Enable/disable the auto roll feature.
Default: 1

autoRollLength: integer

Length of time (in milliseconds) until the auto roll moves to the next panel.
Default: 5000

autoRollPauseOnHover: boolean

Enable/disable the auto roll when the mouse enters the Roller.
Default: 0

animType: none | fade | flash | slide | slide-y

The animation type for panel transitions.
Default: slide

animLength: integer

Length of time (in milliseconds) for the panel transition animation.
Default: 1000

animFlashColor: colorhex

The color hex value for the animType:flash transition.
Default: #ffffff

buildNav: array

An array containing any or none of the string values index, prev, next in the order you wish them to appear. If this is empty no navigation will be built or displayed.
Default: [ 'prev', 'index', 'next' ]

Examples

buildNav: [ 'index' ]

This example would only show a navigation list of the panels, e.g. 1 2 3 4 5

buildNav: [ 'prev', 'next' ]

This example would only show the previous and next buttons, e.g. « Previous Next »

startOnItemIndex: integer

The index of the panel to start the Roller on after initialisation. Index numbers start from 0, i.e. the first panel item will be 0.
Default: 0

onrollend: function( rollerElem )

Function to trigger when the panel transition animation finishes.
Default: function(){}

onautorollstart: function( rollerElem )

Function to trigger when the auto roll starts.
Default: function(){}

onautorollstop: function( rollerElem )

Function to trigger when the auto roll stops.
Default: function(){}

Events ↑ Back to top

roller_show arguments: childIndex

Show a specific panel.

Example

$(rollerElem).trigger('roller_show', [ 1 ]);

roller_next

Go to the next panel.

Usage

$(rollerElem).trigger('roller_next');

roller_prev

Go to the previous panel.

Usage

$(rollerElem).trigger('roller_next');

roller_autoroll_start

Start the autoroll timer.

Usage

$(rollerElem).trigger('roller_next');

roller_autoroll_stop

Stop the autoroll timer.

Usage

$(rollerElem).trigger('roller_next');