slider com 4 linhas de código

<section>
<div id="caroussel">
<h2>Latest Works</h2>
  <nav>
	<a href="" class="active"></a>
	<a href=""></a>
	<a href=""></a>
  </nav>
	<div class="inner">
	<ul>
	<li>
		<a href="">
		<img src="img/foto_1.jpg" alt=""/>
		</a>
	</li>
	<li>
		<a href="">
		<img src="img/foto_2.jpg" alt=""/>
		</a>
	</li>
	<li>
		<a href="">
		<img src="img/foto_3.jpg" alt=""/>
	        </a>
	</li>
	</ul>
	</div>
</div>
</section>

#caroussel h2{
	float:left;
	padding-top:5px;
	margin-bottom:18px;
}
#caroussel nav{
	padding-top:20px;
	float:right;
	margin-bottom:8px;
}
#caroussel nav a{
	float:left;
	width:9px;
	height:9px;
	margin-left:15px;
	border:1px solid #9a9b9c;
	border-radius:20px;
	background-color:#fff;
	transition:background-color .2s	ease-out;
	-webkit-transition:background-color .2s ease-out;
	-moz-transition:background-color .2s ease-out;
}
#caroussel nav a:hover{
	background-color:#ccc;
}
#caroussel nav a.active{
	background-color:#aaa;
}
#caroussel .inner {
	clear:left;
	width:1200px;
	height:412px;
	overflow:hidden;
}
#caroussel ul{
	width:3600px;
	height:412px;
	list-style-type:none;
}
#caroussel ul li{
	position:relative;
	float:left;
}

$("#caroussel nav a").click(function(){
	var ind = $(this).index("#caroussel nav a");
	$("#caroussel ul li").animate({"margin-left": "-"+ind*1200});
	
	$("#caroussel nav a").removeClass("active");
	$(this).addClass("active");
	return false;
});