Jquery slider problem

JavaScript
1

I’m trying to get the slide effect which is achieved using jquery, however, I don’t seem to be able to slide my images when the buttons are clicked.

Below is the code and perhaps someone could advise of a solution if possible.



   <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/
jquery-1.3.2.min.js"></script> 

 <script type="text/javascript">
$(document).ready(function(){
var speed = 600;
$('#navPrev').click(function(){
$('#carousel ul').animate({marginLeft:'-280px'}, speed);
});
$('#navNext').click(function(){
$('#carousel ul').animate({marginLeft:'1px'}, speed);
});});
</script>  

<style type="text/css">
#container {height:100px; width:500px; font-family:Tahoma;}
#carousel { height:100px; width:500px; border:1px solid #000;
overflow:hidden;}
#carousel ul { list-style-type:none;margin-top:4px; width:2000px; margin-
left:0; left:0; padding-left:1px;}
#carousel li { display:inline;}
#carousel ul li img{ width:90px; height:90px; border:1px solid #ccc;
float:left; }
#navPrev {float:left;}
#navNext {float:right;}
</style> 

------------------------------------------------------------

<div id="container">
<div id="carousel">

<ul>
<li><img src="image.gif" /></li>
<li><img src="image.gif" /></li>
<li><img src="image.gif" /></li>
<li><img src="image.gif" /></li>
<li><img src="image.gif" /></li>
<li><img src="image.gif" /></li>
<li><img src="image.gif" /></li>
<li><img src="image.gif" /></li>

</ul>
</div>
<a id="navPrev" href="#">Next</a>
<a id="navNext" href="#">Previous</a>

Thanks for any help.