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:
Code:
           
<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:
Code:
$(function() {
    $(".carousel").jCarouselLite({
        btnNext: ".next",
        btnPrev: ".prev"
    });
});
CSS:
Code:
#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;
}