## jquery slider problem

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.
Code:
```   <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/
jquery-1.3.2.min.js"></script>

<script type="text/javascript">
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-
#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.