jQuery Please Help!

[xoziggieox]

Hello! I am new to jQuery and not that experienced at Web design. I want to have the Lavalamp menu and the content slider on the same page but the slider isn't working. I was wondering if you have any ideas on how to make this work. This is my script:

</style>

<link href="CSS/layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="easyslider1.5/js/easySlider1.5.js"></script>

<!-- Optional -->
<script type="text/javascript" src="js/jquery.easing.min.js"></script>

<script type="text/javascript">
$(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});


$(document).ready(function(){
$("#slider").easySlider();
});



</script>


(a little further down the page)


<div id="slider">
<ul>
<li><img src="Images/01.jpg" alt="" /></li>
<li><img src="Images/02.jpg" alt="" /></li>

</ul>
</div>


Slider CSS


/*Easy Slider*/


/* image replacement */
.graphic, #prevBtn, #nextBtn{
margin:0;
padding:0;
display:block;
overflow:hidden;
text-indent:-8000px;
}
/* // image replacement */


#container{
margin:0 auto;
position:relative;
text-align:left;
width:696px;
background:#fff;
margin-bottom:2em;
}

#content{
position:relative;
}

#slider{}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider li{
width:696px;
height:241px;
overflow:hidden;
}
#prevBtn, #nextBtn{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:71px;
}
#nextBtn{
left:696px;
}
#prevBtn a, #nextBtn a{
display:block;
width:30px;
height:77px;
background:url(images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a{
background:url(images/btn_next.gif) no-repeat 0 0;
}