Kwicks for jQuery

Kwicks for jQuery is a highly customizable and versatile widget that enables beautiful transition effects between list items. Kwicks transforms lists and other elements into stylish accordion-like sliding boxes.

Setting up this example is easy:

Add the markup

<ul class="kwicks">
	<li id="kwick1"></li>  
	<li id="kwick2"></li>  
	<li id="kwick3"></li>  
	<li id="kwick4"></li>  
</ul>

Add the CSS

.kwicks li{
	float: left;
	width: 125px;
	height: 100px;
	margin-right: 5px;
}
#kwick1 { 
	background-color: #53b388;
	background-image: url('images/meet.gif');
}
#kwick2 {
	background-color: #5a69a9;
	background-image: url('images/kwicks.gif');
}
#kwick3 {
	background-color: #c26468;
	background-image: url('images/for.gif');
}
#kwick4 { 
	background-color: #bf7cc7;
	background-image: url('images/jquery.gif');
	margin-right: none;
}

Add the jQuery

$().ready(function() {
	$('.kwicks').kwicks({
		max : 205,
		spacing : 5
	});
});

This is a basic example of what you can do with Kwicks. With the amount of control this plugin provides over its properties, many configurations are possible. It can even go vertical!

Demo Link

Documentation

Download

Read more