jQuery Slider/Carousel not functioning

I am trying to install a simple slider/carousel in the middle of a web page. I opted for the JCarouselLite plug-in but can't seem to get it working.

When the page loads, the images tile vertically(as opposed to line up horizontally) and the nav buttons sit below them.

I have included necessary links to jQuery,the Carousel plug-in and also a custom.js file that includes a call to the plug-in to activate it(i think). I also have linked to a custom.css file to style the bar.

I am wondering if my call to the plug-in is coded correctly. Beyond that, I can't understand why it isen't working. It is probably obvious but I'm a bit stuck!

Could anyone help? I have attached the code showing the html, the custom.js function and the css.

Thanks,

nevblanc79

HTML:

<div id="carousel">
<h3>Our Titles</h3>

<div class="carousel">
<ul>
<li><a href="portfolio_item.html"><img width="198" height="130" src="img/pictures/1.jpg" alt></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/2.jpg" alt="" width="198" height="130" ></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/3.jpg" alt="" width="198" height="130" ></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/4.jpg" alt="" width="198" height="130" ></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/5.jpg" alt="" width="198" height="130" ></a></li>
<li><a href="portfolio_item.html"><img src="img/pictures/6.jpg" alt="" width="198" height="130" ></a></li>
</ul>
</div>

<button class="prev"><</button>
<button class="next">></button>

</div>


Javascript:

$(function() {
$(".carousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev"
});
});

CSS:
#carousel {
width:900px;
overflow:hidden;
margin-bottom:30px;
}

.carousel ul li {
width:198px;
margin-right:36px;
}

#carousel .next, #carousel .prev {
margin:0px;
font-size:15px;
padding:4px 10px;
}

#carousel .next {
float:right;
}

#carousel .prev {
float:left;
}