Scrollable plugins in action

Scrollable demo 6 / 11 : Scrollable plugins in action

Here are the available plugins in action:

1. Circular
2. Navigator
3. Autoscroll
4. Mousewheel

You can additionally see a demo where all the plugins are used together. Each demo here is built upon the minimal setup.

Circular plugin

This plugin makes an infinite loop from scrollable items. After reaching the last element navigation returns to the first element and vice versa.

JavaScript setup

All scrollable plugins are chained after the initial scrollable call. After chaining the circular() call the scrollable becomes magically "infinite".

// initialize scrollable together with the circular plugin
$("#infinite").scrollable().circular();

View the standalone demo and the documentation of the circular plugin.

Navigator plugin

Provides navigation buttons for switching between pages.

HTML setup

By default the plugin searches for an element whose CSS class name is "navi" and auto-generates the navigational buttons inside this element. In our previous setup we have placed the following DIV above the scrollable:

<!-- wrapper for navigator elements -->
<div class="navi"></div>

Afterwards the plugin will transform the empty DIV into the following structure:

<!-- wrapper -->
<div class="navi">
	<a href="0" class="active"/>
	<a href="1" class=""/>
	<a href="2" class=""/>
</div>

We have styled the navigator with the scrollable-navigator.css file which looks like this:

/* position and dimensions of the navigator */
.navi {
	margin-left:328px;
	width:200px;
	height:20px;
}


/* items inside navigator */
.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(../img/scrollable/arrow/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
.navi a.active {
	background-position:0 -16px;     
}

You can alternatively generate the navigator links manually as we do in our next demo.

JavaScript setup

// initialize scrollable together with the navigator plugin
$("#browsable").scrollable().navigator();

View the standalone demo and the documentation of the navigator plugin.

Autoscroll plugin

Makes the scrolling automatic. You can play with the action buttons below the scrollable. The autoscrolling will pause if you interact with the scrollable with your mouse.

Play Pause Stop

JavaScript setup

This time we have supplied two configuration options for the plugin. By disabling the autoplay configuration option, the autoscroll won't start when the page loads. Just like all the tools, the plugins also support the api configuration option so that you have an easy access to the tool's programming interface. The API is being used by the action buttons.

// initialize scrollable together with the autoscroll plugin
window.api = $("#scroller").scrollable().autoscroll({
	autoplay: false,
	api: true
});

Action buttons

The difference between pause and stop is that when the autoscroll is in the paused state the playback will resume if the user interacts with the scrollable with the mouse.

<div id="actionButtons">
	<button type="button" onClick="api.play()">Play</button>
	<button type="button" onClick="api.pause()">Pause</button>
	<button type="button" onClick="api.stop()">Stop</button>
</div>

View the standalone demo and the documentation of the autoscroll plugin.

Mousewheel plugin

This plugin enables scrolling with your mousewheel.

JavaScript setup

// initialize scrollable together with the mousewheel plugin
$("#wheeled").scrollable().mousewheel();

View the standalone demo and the documentation of the mousewheel plugin.

Chaining plugins

Here we use all the plugins together:

JavaScript setup

// heeeeeeeeeeere we go.
$("#chained").scrollable({hoverClass: 'hover'}).circular().navigator().mousewheel().autoscroll({
	steps: 5,
	interval: 3000		
});

View the standalone demo.

Photo credits »