jQuery Liquid Carousel plugin example

To see this plugin in action, just resize this window...

Liquid carousel is a jQuery plugin intented for liquid designs. Every time the container of the carousel gets resized, the number of items in the list change to fit the new width.


In order to use liquid carousel, you have to include the jQuery library and the liquid carousel script your page:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.liquidcarousel.js"></script>
Then you need to add the items list and the navigation buttons in the body of your document:
<div id="liquid">
	<span class="previous"></span>
	<div class="wrapper">
		<ul>
			<li><a href="#"><img src="image.jpg" width="88" height="126" alt="image"/></a></li>
			<li><a href="#"><img src="image.jpg" width="88" height="126" alt="image"/></a></li>
			<li><a href="#"><img src="image.jpg" width="88" height="126" alt="image"/></a></li>
			<li><a href="#"><img src="image.jpg" width="88" height="126" alt="image"/></a></li>
			...
		</ul>
	</div>
	<span class="next"></span>
</div>
Finally you need to hook up the script using the $(document).ready() function:
$(document).ready(function() {
	$('#liquid').liquidcarousel({height:160});
});

Bellow are all the available options with their default values:

$(document).ready(function() {
	$('#liquid').liquidcarousel({
		height: 150,		//the height of the list
		duration: 100,		//the duration of the animation
		hidearrows: true	//hide arrows if all of the list items are visible
	});
});