basic sliding gallery

by ashleycam3ron

HTML

<div id="container">
    <div id="content">
        <div id="banner">
            <ul>                
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>            
            </ul>
        </div>
    </div>
</div>

CSS

/* image replacement */
        .graphic, #prevBtn, #nextBtn{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
            }
    /* // image replacement */    
#container{    
        margin:0 auto;
        position:relative;
        text-align:left;
        width:696px;
        background:#fff;        
        margin-bottom:2em;
        }    
    #header{
        height:80px;
        background:#5DC9E1;
        color:#fff;
        }                
    #content{
        position:relative;
        }
    #banner{}    
    #banner ul, #slider li{
        margin:0;
        padding:0;
        list-style:none;
        }
    #banner li, #banner li:nth-child(3), #banner li:nth-child(5){ 
        /* 
            define width and height of list item (slide)
            entire slider area will adjust according to the parameters provided here
        */ 
        width:696px;background:black;
        height:241px;
        overflow:hidden; 
        }    
    #banner li:nth-child(2), #banner li:nth-child(4)  {background:gray;} 
    #prevBtn, #nextBtn{ 
        display:block;
        width:30px;
        height:77px;
        position:absolute;
        left:-30px;
        top:71px;
        }    
    #nextBtn{ 
        left:696px;
        }                                                        
    #prevBtn a, #nextBtn a{  
        display:block;
        width:30px;
        height:77px;
        background:black;    
        }    
    #nextBtn a{ 
        background:black;    
        }

JavaScript

(function($) {

    $.fn.easySlider = function(options){
      
        // default configuration properties
        var defaults = {            
            prevId:         'prevBtn',
            prevText:         'Previous',
            nextId:         'nextBtn',    
            nextText:         'Next',
            controlsShow:    true,
            controlsBefore:    '',
            controlsAfter:    '',    
            controlsFade:    true,
            firstId:         'firstBtn',
            firstText:         'First',
            firstShow:        false,
            lastId:         'lastBtn',    
            lastText:         'Last',
            lastShow:        false,                
            vertical:        false,
            speed:             800,
            auto:            false,
            pause:            2000,
            continuous:        false
        }; 
        
        var options = $.extend(defaults, options);  
                
        this.each(function() {  
            var obj = $(this);                 
            var s = $("li", obj).length;
            var w = $("li", obj).width(); 
            var h = $("li", obj).height(); 
            obj.width(w); 
            obj.height(h); 
            obj.css("overflow","hidden");
            var ts = s-1;
            var t = 0;
            $("ul", obj).css('width',s*w);            
            if(!options.vertical) $("li", obj).css('float','left');
            
            if(options.controlsShow){
                var html = options.controlsBefore;
                if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
                html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
                html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
                if(options.lastShow) html...