EppsNet Labs: Glider

Here’s a really simple gliding tabs demo using glider.js, which is downloadable here.

As you can see from the really simple code below, you could do something pretty nice with this without too much extra effort.

Glider is dependent on the Prototype and Scriptaculous libraries, both of which are included in the glider download, as is the required stylesheet.

<script src="javascripts/prototype.js"></script>
 
<script src="javascripts/effects.js"></script> 

<script src="javascripts/glider.js"></script>
<div id="glider">
<div class="controls"><a href="#tab1">Tab 1</a> |
<a href="#tab2">Tab 2</a> |
<a href="#tab3">Tab 3</a> |
<a href="#tab4">Tab 4</a></div>
<div class="scroller">
<div class="content">
<div id="tab1" class="section">Tab 1</div>
<div id="tab2" class="section">Tab 2</div>
<div id="tab3" class="section">Tab 3</div>
<div id="tab4" class="section">Tab 4</div>
</div>
</div>
</div>

<script type="text/javascript">// <!&#91;CDATA&#91;
    new Glider( 'glider', { duration:0.5 } );
// &#93;&#93;></script>