SlideScroller v1.0

Overview

To set it up, all you need is to present your slider content in the following page structure, add the following css styles to your stylesheet, and link to the following JavaScript files. Enjoy!

The XHTML

SlideScroller only requires that you wrap your pages in the following simple mark-up. All navigation is generated automatically so all you have to worry about is styling it. However, there are some cases in which it makes sense to hard code your own pagination. Have no fear. SlideScroller recognizes if you've done so and simply adds the additional mark-up it requires.

<div id="scroller-wrap">
    <div id="scroller">
        <div class="page">
            <div class="page-content">
            ...
            </div>
        </div>
        ...
    </div>
</div>

If you choose to create your own pagination, place it in the bottom of the slideScroller-wrap div, using the following simple mark-up.

<ul id="scroller-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>		
</ul>

The CSS

Even simpler than the XHTML is the CSS. Since the JavaScript handles most of the dirty work, you only need these few styles. In order to style the highlighted state of the pagination, use the #scroller-nav a.highlight style.

#scroller {
    position: relative;
    overflow: hidden;
    }
div.page {
    clear: both;  
    position: absolute;
    top: 0px;
    }	
div.page-content {
    clear: both;
    }

The JavaScript

This is where the magic happens. Fortunately, it doesn't require that you be a magician. All you have to do is link your web page to mootools.js and slideScroller.js. Then you have to set the width and height of your pages in slideScroller.js and set which navigation items you want to show up. That's it!

// User Set Up
var pageWidth = "500px";
var pageHeight = "200px";
var want_pagination = true;
var want_next_button = true;
var want_previous_button = true;