Dynamically add and remove items

JavaScript:close x

$("#foo1").carouFredSel({
	auto	: false,
	prev	: "#foo1_prev",
	next	: "#foo1_next",
	scroll 	: 5

}).find("li").click(function() {
	$(this).animate({
		opacity 	: 0
	}, 500).animate({
		width		: 0,
		margin		: 0,
		borderWidth	: 0
	}, 500, function() {
		$("#foo1").trigger("removeItem", $(this));
	});
	
}).css("cursor", "pointer");

HTML:close x

<div class="list_carousel">
	<ul id="foo1">
		<li> c </li>
		<li> a </li>
		<li> r </li>
		<li> o </li>
		<li> u </li>
		<li> F </li>
		<li> r </li>
		<li> e </li>
		<li> d </li>
		<li> S </li>
		<li> e </li>
		<li> l </li>
		<li> : </li>
		<li>   </li>
		<li> a </li>
		<li> n </li>
		<li>   </li>
		<li> i </li>
		<li> n </li>
		<li> f </li>
		<li> i </li>
		<li> n </li>
		<li> i </li>
		<li> t </li>
		<li> e </li>
		<li> , </li>
		<li>   </li>
		<li> c </li>
		<li> i </li>
		<li> r </li>
		<li> c </li>
		<li> u </li>
		<li> l </li>
		<li> a </li>
		<li> r </li>
		<li>   </li>
		<li> j </li>
		<li> Q </li>
		<li> u </li>
		<li> e </li>
		<li> r </li>
		<li> y </li>
		<li>   </li>
		<li> c </li>
		<li> a </li>
		<li> r </li>
		<li> o </li>
		<li> u </li>
		<li> s </li>
		<li> e </li>
		<li> l </li>
		<li> . </li>
		<li> . </li>
		<li> . </li>
		<li>   </li>
	</ul>
	<div class="clearfix"></div>
	<a class="prev" id="foo1_prev" href="#"><span>prev</span></a>
	<a class="next" id="foo1_next" href="#"><span>next</span></a>
</div>

CSS:close x

.list_carousel {
	padding: 15px 0 15px 40px;
	position: relative;
}
.list_carousel ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
}
.list_carousel li {
	font-size: 30px;
	color: #666;
	text-align: center;
	background-color: #f0f0f0;
	border: 5px solid #ccc;
	width: 50px;
	height: 50px;
	padding: 0;
	margin: 6px;
	display: block;
	float: left;
}
a.prev, a.next {
	background: url(../images/miscellaneous_sprite.png) no-repeat transparent;
	width: 45px;
	height: 50px;
	display: block;
	position: absolute;
	top: 85px;
}
a.prev {			left: -22px;
					background-position: 0 0; }
a.prev:hover {		background-position: 0 -50px; }
a.next {			right: -22px;
					background-position: -50px 0; }
a.next:hover {		background-position: -50px -50px; }

a.prev span, a.next span {
	display: none;
}
.clearfix {
	float: none;
	clear: both;
}

JavaScript:close x

function getOptions(items) {
	var i = $("input[name=s_items]").val(),
		p = $("select[name=s_position]").val(),
		o = $("select[name=s_order]").val(),
		d = $("select[name=s_deviation]").val();

	if (o == "false")	o = false;
	if (o == "true")	o = true;
	
	if (items)	return [i, p, o, d];
	else		return [p, o, d];
}

$("#foo2").carouFredSel({
	items	: 4,
	auto	: false,
	prev	: "#foo2_prev",
	next	: "#foo2_next",
	scroll	: {
		items		: 2,
		duration	: 1500
	}
});

$("#insert_btn").click(function(e) {
	var arr = getOptions(true);
	$("#foo2").trigger("insertItem", arr);
	e.preventDefault();
});

$("#remove_btn").click(function(e) {
	var arr = getOptions(false);
	$("#foo2").trigger("removeItem", arr);
	e.preventDefault();
});

HTML:close x

<div class="list_carousel">
	<ul id="foo2">
		<li> 1 </li>
		<li> 2 </li>
		<li> 3 </li>
		<li> 4 </li>
		<li> 5 </li>
		<li> 6 </li>
	</ul>
	<div class="clearfix"></div>
	<a class="prev" id="foo2_prev" href="#"><span>prev</span></a>
	<a class="next" id="foo2_next" href="#"><span>next</span></a>
</div>

CSS:close x

.list_carousel {
	padding: 15px 0 15px 40px;
	position: relative;
}
.list_carousel ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
}
.list_carousel li {
	font-size: 30px;
	color: #666;
	text-align: center;
	background-color: #f0f0f0;
	border: 5px solid #ccc;
	width: 50px;
	height: 50px;
	padding: 0;
	margin: 6px;
	display: block;
	float: left;
}
a.prev, a.next {
	background: url(../images/miscellaneous_sprite.png) no-repeat transparent;
	width: 45px;
	height: 50px;
	display: block;
	position: absolute;
	top: 85px;
}
a.prev {			left: -22px;
					background-position: 0 0; }
a.prev:hover {		background-position: 0 -50px; }
a.next {			right: -22px;
					background-position: -50px 0; }
a.next:hover {		background-position: -50px -50px; }

a.prev span, a.next span {
	display: none;
}
.clearfix {
	float: none;
	clear: both;
}