Scrollable plugins in action

Here are the available plugins in action:

1. Navigator
2. Autoscroll
3. Mousewheel

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

Navigator plugin

Provides navigation buttons for switching between pages.

standalone demo

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(/media/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
$("#navigator").scrollable().navigator();

View 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
var root = $("#autoscroll").scrollable({circular: true}).autoscroll({ autoplay: false });
 
// provide scrollable API for the action buttons
window.api = root.data("scrollable");

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 documentation of the autoscroll plugin.

Chaining plugins

Here we use all the plugins together. We have also enabled mousewheel and circular options.

JavaScript setup

// heeeeeeeeeeere we go.
$("#chained").scrollable({circular: true, mousewheel: true}).navigator().autoscroll({
	interval: 3000
});

Photo credits »