Image Slider Test (not working) /

by asdf

HTML

<div id='carousel_container'>  
  <div id='left_scroll'><img src='http://www.nimbus.se/Images/grey_arrow_left.png' /></div>  
  <div id='carousel_inner'>  
        <ul id='carousel_ul'>  
            <li><a href='#'><img src='http://farm4.static.flickr.com/3328/3575375564_79ab90dca8_b.jpg' /></a></li>  
            <li><a href='#'><img src='http://farm4.static.flickr.com/3163/2505235306_b456603cf3_b.jpg' /></a></li>  
            <li><a href='#'><img src='http://farm4.static.flickr.com/3235/2925947121_8b1f95c95b_b.jpg' /></a></li>  
            <li><a href='#'><img src='http://farm3.static.flickr.com/2769/4481220450_91b0aa9e99_b.jpg' /></a></li>  
            <li><a href='#'><img src='http://farm1.static.flickr.com/118/299048945_faba1a6a4b_b.jpg' /></a></li>  
        </ul>  
  </div>  
  <div id='right_scroll'><img src='http://www.nimbus.se/Images/grey_arrow_right.png' /></div>  
</div>

CSS

#carousel_container{
    position:relative;
}
#carousel_inner {  
float:left; /* important for inline positioning */  
width:630px; /* important (this width = width of list item(including margin) * items shown */  
overflow: hidden;  /* important (hide the items outside the div) */  
/* non-important styling bellow */  
background: #F0F0F0;  
}  
  
#carousel_ul {  
position:relative;  
left:-210px; /* important (this should be negative number of list items width(including margin) */  
list-style-type: none; /* removing the default styling for unordered list items */  
margin: 0px;  
padding: 0px;  
width:9999px; /* important */  
/* non-important styling bellow */  
padding-bottom:10px;  
}  
  
#carousel_ul li{  
float: left; /* important for inline positioning of the list items */  
/*width:200px;  /* fixed width, important */  
/* just styling bellow*/  
padding:0px;  
height:110px;  
background: #000000;  
margin-top:10px;  
margin-bottom:10px;  
margin-left:5px;  
margin-right:5px;
    text-align:center;
}  
  
#carousel_ul li img {  
.margin-bottom:-4px; /* IE is making a 4px gap bellow an image inside of an anchor (<a href...>) so this is to fix that*/  
/* styling */  
cursor:pointer;  
cursor: hand;  
border:0px; 
height:110px;
}  
#left_scroll, #right_scroll{  
float:left;
height:130px;  
width:41px;  
background: #C0C0C0;
position:absolute;
z-index:5;
}
#left_scroll{
    left:0;
}
#right_scroll{  
    right:0;
}
#left_scroll img, #right_scroll img{  
/*styling*/  
cursor: pointer;  
cursor: hand;
position:relative;
    top:22px;
}

JavaScript

$(document).ready(function() {  
        //move the last list item before the first item. The purpose of this is if the user clicks previous he will be able to see the last item.  
        $('#carousel_ul li:first').before($('#carousel_ul li:last'));  
  
        //when user clicks the image for sliding right  
        $('#right_scroll img').click(function(){  
  
            //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '  
            var item_width = $('#carousel_ul li').outerWidth() + 10;  
  
            //calculate the new left indent of the unordered list  
            var left_indent = parseInt($('#carousel_ul').css('left')) - item_width;  
  
            //make the sliding effect using jquery's anumate function '  
            $('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:500,complete:function(){  
  
                //get the first list item and put it after the last list item (that's how the infinite effects is made) '  
                $('#carousel_ul li:last').after($('#carousel_ul li:first'));  
  
                //and get the left indent to the default -210px  
                $('#carousel_ul').css({'left' : '-210px'});  
        }});  
        });  
  
        //when user clicks the image for sliding left  
        $('#left_scroll img').click(function(){  
  
            var item_width = $('#carousel_ul li').outerWidth() + 10;  
  
            /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */  
            var left_indent = parseInt($('#carousel_ul').css('left')) + item_width;  
  
            $('#carousel_ul').animate({'left' : left_indent},{queue:false, duration:500},function(){  
  
            /* when sliding to left we are moving the last item before the first item */  
            $('#carousel_ul li:first').before($('#carousel_ul...