This time we add navigational elements to the minimal setup. We have identical HTML, JavaScript and CSS coding for the basic scrolling functionality but we have additional tags placed beside the scrollable for navigation. You can also use your mousewheel to scroll through the elements.

HTML code

Here we have the new tags a.next, a.prev and div.navi placed before and after the scrollable. Those tags will automatically become navigational elements without additional JavaScript programming. Only their apperance are modified with CSS.

<!-- navigator -->
<div class="navi"></div>

<!-- prev link -->
<a class="prev"></a>

<!-- root element for scrollable -->
<div class="scrollable">

	<!-- root element for the items -->
	<div class="items">
		<div>0</div>  <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div> 
		<div>5</div>  <div>6</div>  <div>7</div>  <div>8</div>  <div>9</div> 
		<div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div>
	</div>
	
</div>

<!-- next link -->
<a class="next"></a>

JavaScript code

We have identical JavaScript coding as in the minimal setup. No additional configuration options are necessary and we are happy with the default settings.

$("div.scrollable").scrollable();

If you would wanted to use another kind of tag or class name for your navigational items you must tell the scrollabe about those changes in its configuration. Let's say you want the "next" and "prev" links to be like this:

<!-- custom "prev" link -->
<div class="less"></div>

<!-- custom "next" link -->
<div class="more"></div>

Then you'll need following configuration:

$("div.scrollable").scrollable({
	next: 'div.less',
	prev: 'div.more'
});

Mousewheel support

Mousewheel support is enabled by simply including the jquery.mousewheel plugin in the page like this. You should specify the file after jQuery is being called, but before scrollable is loaded.

<script src="http://static.flowplayer.org/js/jquery.mousewheel.js"></script>

CSS code

We are using this file for the scrollable setup. It is the same as in minimal setup and we use this file for the navigational buttons. Both files are documented.

Page scroll

Here is another demo which shows you how to add navigational buttons that navigate between pages instead of single items.

HTML setup

The trick is to add a.prevPage and a.nextPage elements beside the scrollable:

<!-- prev page -->
<a class="prevPage"></a>

<!-- root element for scrollable -->
<div class="scrollable">

	<!-- root element for the items -->
	<div class="items">
		<div>0</div>  <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>
		<div>5</div>  <div>6</div>  <div>7</div>  <div>8</div>  <div>9</div>
		<div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div>
	</div>

</div>

<!-- next page -->
<a class="nextPage"></a>

<!-- power tag: let rest of the page layout normally -->
<br clear="all" />

JavaScript coding

Our $("div.scrollable").scrollable(); call is enough for initializing both of our scrollables on this page without extra configuration variables.