jQuery Plugin: "Liquid Carousel" image slider

Include the jQuery library and the liquid plugin:

<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/jquery.liquidcarousel.js"></script>

Then you need to add the HTML structure as a list of items and the navigation buttons:

<div id="image_slider">
	<span class="previous"></span>
	<div class="wrapper">
		<ul>
			<li><a href="#"><img src="image01.jpg" alt="image01"/></a></li>
			<li><a href="#"><img src="image02.jpg" alt="image02"/></a></li>
			<li><a href="#"><img src="image03.jpg" alt="image03"/></a></li>
			<li><a href="#"><img src="image04.jpg" alt="image04"/></a></li>
			...
		</ul>
	</div>
	<span class="next"></span>
</div>

Finally initiate the script using the $(document).ready() function:

$(document).ready(function() {
	console.log("Plugin is initiated when document is loaded and ready");
	$('#image_slider').liquidcarousel({
		height: 129,		//the height of the list
		duration: 500,		//the duration of the animation, in ms
		hidearrows: true	//hide arrows if all of the list items are visible
	});
});