Roller Demo


View Documentation

Basic

The basic Roller comes almost completely un-styled, giving you the flexibility to integrate it into your project how you see fit. At a minimum you will need to set a height and width for the roller-item elements so dimensions can be calculated:

$(".target").roller();
.roller-item { height: 300px; width: 300px; }
<div class="target">
	<div class="roller-item">
		// Content
	</div>
	<div class="roller-item">
		// Content
	</div>
	<div class="roller-item">
		// Content
	</div>
</div>
Demo
1
2
3
4
5

Paged

Bt default, Roller will calculate page sizes by determining how many roller-item elements will fit in the roller-viewport at once. You can opt to have Roller stop at every roller-item element by setting the paged option at initialization:

$(".target").roller({
	paged: true
});
Demo
1
2
3
4
5

Auto Width

Roller will base all calculations on the item's widths, allowing items with varying widths to exists in the same instance. You can also set Roller to automatically resize all of it's items to the viewport width.

$(".target").roller({
	autoWidth: true
});
Demo
1
2
3
4
5

Single

To display a single item at a time:

$(".target").roller({
	single: true
});
Demo
1
2
3
4
5

Infinite

Roller can also infinitely loop instead of having hard start and stop positions:

$(".target").roller({
	infinite: true
});
Demo
1
2
3
4
5

Breakpoint

By default, each Roller instance will enable itself on all screen sizes. You can specify a different width by setting either the maxWidth or minWidth option on initialization.

$(".target").roller({
	minWidth: "740px"
});
Demo
1
2
3
4
5

Extra Width

:

$(".target").roller({
	extraMargin: 200
});
Demo
1
2
3
4
5

IE Support

When supporting IE you will need to include a HTML5 enabler and matchMedia polyfill (IE 8, IE 9).