jQuery slider

jQuery slider

Hi all, im fairly new on the jQuery scene and ive looked into alot of the tutorial for building sliders, id like to learn to build them rather than use plug-ins or use other peoples code. The sliders i have looked at to get an insight into the working all see very long winded and i decided to look into shorthand ideas for sliders and this is the code i came up with, so far it hasn't worked and i seem to have hit a brick wall, any ideas?



  1. My HTML code

    <div id="jqslider" name="jqslider">
               
           <div id="arrowleft" name="arrowleft">
            <img src="images/slideleft.png" width="100" height="300"/>
            </div>
               
                  <ul id="slider" name="slider">
                        <li style="background-image:url(images/slide1.png);"></li>
                        <li style="background-image:url(images/slide2.png);"></li>
                        <li style="background-image:url(images/slide3.png);"></li>
                        <li style="background-image:url(images/slide4.png);"></li>
                        <li style="background-image:url(images/slide5.png);"></li>
                  </ul>
                                                                                                                                                              <div id="arrowright" name="arrowright">
              <img src="images/slideright.png" id="sliderright" name="sliderright" width="100" height="300"/>
              </div>
    </div>       

     My CSS code
    #jqslider{
        float:left;
        width:1000px;
        height:300px;
        overflow:hidden;
        max-height:300px;
       
    }
     #jqslider #arrowleft{
        float:left;
        width:99px;
        height:300px;

    }

    #jqslider #arrowright{
        float:left;
        width:99px;
        height:300px;

    }


    #jqslider #slider{
        float:left;
        list-style-type:none;
        width:758px;
        height:300px;
        overflow:hidden;

    }

     #jqslider #slider li{
        float:left;
        width:800px;
        height:300px;

    }


    My jQuery code

    <script type="text/javascript" language="javascript">
    $(document).ready(function(){
    var i=0;

    $("#sliderright").click(function(){
           
        $("#slider").children("li").eq(i).hide(this, 400);
       
        if(i <= 5){
           
            ++i;
           
        } else {
           
            var i = 0;
           
        }
       
        $("#slider").children("li").eq(i).show(this, 400);   
       
    });

    }

    });
    </script>