help with an item slider

help with an item slider

Hi

i want to write a very simple item slider to learn jquery better.

i have the cotent from the database looped and presented like so:
  1. <div class="items">
       
            <?php $i= 0; while ($item = mysql_fetch_object($results)){?>
                            <div id="item-n" title="<?php echo $i ?>">
                                <h4><?php echo $item->first_name ?></h4>
                                <p><?php echo $item->email ?></p>
                                <p class="link">
                                    <a href="/item/<?php echo $item->id ?>">more</a>&nbsp;
                                   
                                </p>
                            </div>
            <?php $i++; }?>
           
        </div>












i have a css class for the current item
.current {background-color: pink;}

then i use this code . all i need is that on load it will show only the first item and then when the next or previous is clicked it will display only the next item or previous item:
  1.         $(document).ready(function(){
               
               
                /*$("div.items > div:eq(0)").addClass("current");*/
               
                $("div.items > div:not(':eq(0)')").hide();

                /*$("div.items > div:eq(0)").show();
                $("div.items > div:not(':eq(0)')").hide();*/
               
               
                $("div.item-nav > div").click(function(){
                    //get the index of the item that is highlighted
                    var currentDiv = $("div.items > div.current").index();
                    //alert(currentDiv);
                    //get the contents of the current div
                    var thecurrentdiv = $("div.items > div.current");
                    $("div.items > div").hide();
                    thecurrentdiv.show();

                   
                   

                    //get the total number of "rows"
                    var itemCount = $("div.items > div").size();

                    //are we going forward or backward?
                    var direction = $(this).attr("rel");

                    var newDiv = parseInt(currentDiv) + parseInt(direction);
                        //alert(newDiv);
                    if(newDiv == itemCount ) {
                        //reached the bottom - cycle back to the top
                        $("div.items div").removeClass("current");
                       
                        //add the new highlight
                        $("div.items > div:eq(0)").addClass("current");
                    } else if (newDiv == -1) {
                       
                        //reached the bottom - cycle back to the top
                        $("div.items div").removeClass("current");

                        //add the new highlight
                        $("div.items > div:eq(" + (itemCount - 1) + ")").addClass("current")

                    } else {
                       
                        //remove the current highlight
                        $("div.items div").removeClass("current");

                        //add the new highlight
                        $("div.items > div:eq(" + newDiv + ")").addClass("current")
                    }


                })
            });























































but the resule for now is:
first click on the next - all the items disappear.
another click on the next - the first item appear.
another click on the next - indeed the next item appear and so on.

then click on previous - instead of going backward it go one next.
another click on previous - it does go to the previous and so on.

what am i missing here?

again, all i need is that on page load only the first item is showing and the according to the next or prev the according target will appear.

best regards