jQuery Scroller

Please address bugs and your suggestions to Github issues or E-mail.

Basic usage

$('#basic').scroller();

<section id="basic">
	<ul>
		<li><img src="image-1.jpg" ... /></li>
		<li><img src="image-2.jpg" ... /></li>
		<li><img src="image-3.jpg" ... /></li>
		<li><img src="image-4.jpg" ... /></li>
		<li><img src="image-5.jpg" ... /></li>
	</ul>
</section>

Change speed

$('#speed').scroller({ step:15 });

Fixed objects

Graham Smith
Brand Re-versioning

[Fixed]

$('#fixed').scroller({ fixed: 'p' });

<section id="basic">
	<p>Graham Smith<br /> Brand Re-versioning ... </p>
	<ul>
		<li><img src="image-1.jpg" ... /></li>
		<li><img src="image-2.jpg" ... /></li>
		<li><img src="image-3.jpg" ... /></li>
		<li><img src="image-4.jpg" ... /></li>
		<li><img src="image-5.jpg" ... /></li>
	</ul>
</section>

Vertical scrolling

$('#vertical').scroller({ direction: 'vertical' });

API

$('#api').scroller();

// API requests:
$('#api').data('scroller').disable();
$('#api').data('scroller').enable();
$('#api').data('scroller').getStatus(); // Boolean
$('#api').data('scroller').getOffset(); // Number
// OR
var scroller = $('#api').data('scroller');
scroller.disable();
scroller.enable();
scroller.getStatus();
scroller.getOffset();

Options

Key	Default value	Description
`interval`	`10`	Time between each call to the function that does the scrolling.
`step`	`5`	How many pixels the scrollable area should move in each scrolling cycle.
`direction`	`'horizontal'`	Scrolling direction — `'horizontal'` or `'vertical'`.
`fixed`	`'.fixed'`	Selector of fixed object inside the scroller.

Tested in browsers

Firefox: 3.5.19,5.0
Opera: 11.50
Google Chrome: 12
Internet Explorer: 6, 8, 9
Safari: 5.0.5

Dependencies

Required jQuery 1.3+

Installation

In <head> tag:

<link href="path/to/jquery.scroller.css" type="text/css" rel="stylesheet" />
<script src="path/to/jquery.scroller.js" type="text/javascript"></script>

JavaScript:

$(function(){
	$('selector').scroller();
});

CSS:

selector {
	position: relative;
	overflow: hidden;
	height: <value>;
}

jQuery Scroller

Table of contents:

Basic usage

Change speed

Fixed objects

Vertical scrolling

API

Options

Tested in browsers

Dependencies

Installation