jquery

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script src="jq/jquery-1.7.1.min.js" type="text/javascript"></script>
 <script src="jq/jquery-1.7.js" type="text/javascript"></script>
    <script src="jq/jquery.kwicks-1.5.1.js" type="text/javascript"></script>
 <script type="text/javascript">
     $().ready(function () {
         $('.kwicks').kwicks({
             max: 600,
             spacing: 5,

            
         });
     });  
</script>
     <title></title>
</head>

<body>
<div id="wrapper">
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!--nav end-->
<div id="header">
<div id="kwickwrapper">
<ul class="kwicks" >  
    <li id="kwick1"></li>  
    <li id="kwick2"></li>  
    <li id="kwick3"></li>  
    <li id="kwick4"></li>  
</ul>  
</div>
</div><!--header end-->
<div id="mainbody"></div>
</div><!--wrapper end-->
</body>
</html>

CSS

body 
{
    background-image:url('images/bg-vblack.gif');
    background-repeat:repeat-x;
    background-color:#7E7B78;
    margin:0px;
    padding:0px;
    
}

#wrapper
{
   background-color:#171717;
   margin:0px auto auto auto;
   padding-top:70px;
   padding-bottom:20px;
      width:800px;
        -moz-box-shadow: 3px 3px 4px #727272;
-webkit-box-shadow: 3px 3px 4px #727272;
box-shadow: 3px 3px 4px #727272;
    
    }
.nav
{
    background-color:white;
    width:800px;
    height:30px;
   
        }
        
.nav ul
{
    
    display:block;
      list-style:none;
      margin-left:0px;
 }
            
.nav ul li
{
    
    height:30px;
    line-height:30px;
    width:120px;
    text-align:center;
    font-family:Verdana;
    font-size:12px;
      color:Gray;
   margin:0;
   padding:0;
   list-style:none;
   position:relative;
     float:left;
    border-right:1px groove gray;
  
    
 }
 .nav ul li a
 {
      font-family:Verdana;
        font-size:12px;
    color:Black;
    text-decoration:none;
     }
     
      .nav ul li:hover 
 {
      
      background-color:#E3A364;
            height:28px;
       border-right:1px solid gray;
      border-left:1px solid gray;
      border-bottom:2px solid gray;
     text-shadow:1px 1px 1px #FFF;
      font-family:Verdana;
       font-size:12px;
    
    text-decoration:none;
     }
    #header
    {
      
      height:250px;
      width:800px;
      background-color:#E3A364;
      padding-top:10px;
      
     
        
        }

/***********************************************slider************************************************/
#kwickwrapper
{
    margin-left:auto;
    margin-right:auto;
     height:200px;
    width:740px;
    }
.kwicks {  
    list-style: none;  
    position: relative;  
    margin: 0;  
    padding: 0;
    top: 0px;
    left: 0px;
    width: 100%;
}  
.kwicks li{  
    display: block;  
    overflow: hidden;  
    padding: 0;  
    cursor: pointer;  
}  
.kwicks li{
    float: left;
   ...

JavaScript

/*
    Kwicks for jQuery (version 1.5.1)
    Copyright (c) 2008 Jeremy Martin
    http://www.jeremymartin.name/projects.php?project=kwicks
    
    Licensed under the MIT license:
        http://www.opensource.org/licenses/mit-license.php

    Any and all use of this script must be accompanied by this copyright/license notice in its present form.
*/

(function($){
    $.fn.kwicks = function(options) {
        var defaults = {
            isVertical: false,
            sticky: false,
            defaultKwick: 0,
            event: 'mouseover',
            spacing: 0,
            duration: 500
        };
        var o = $.extend(defaults, options);
        var WoH = (o.isVertical ? 'height' : 'width'); // WoH = Width or Height
        var LoT = (o.isVertical ? 'top' : 'left'); // LoT = Left or Top
        
        return this.each(function() {
            container = $(this);
            var kwicks = container.children('li');
            var normWoH = kwicks.eq(0).css(WoH).replace(/px/,''); // normWoH = Normal Width or Height
            if(!o.max) {
                o.max = (normWoH * kwicks.size()) - (o.min * (kwicks.size() - 1));
            } else {
                o.min = ((normWoH * kwicks.size()) - o.max) / (kwicks.size() - 1);
            }
            // set width of container ul
            if(o.isVertical) {
                container.css({
                    width : kwicks.eq(0).css('width'),
                    height : (normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px'
                });                
            } else {
                container.css({
                    width : (normWoH * kwicks.size()) + (o.spacing * (kwicks.size() - 1)) + 'px',
                    height : kwicks.eq(0).css('height')
                });                
            }

            // pre calculate left or top values for all kwicks but the first and last
            // i = index of currently hovered kwick, j = index of kwick we're calculating
    ...