How To: Slide Images with Overlay Caption Using CSS and jquery – Easy Way

	<div id="button">
		 <a class="button1 active" rel="1" href="#"></a>
		 <a class="button2" rel="2" href="#"></a>
		 <a class="button3" rel="3" href="#"></a>
	</div> <!-- end of div button-->
 
	<div class="clear"></div>
 
	<div id="myslide">
		<div class="cover">
 
			<div class="mystuff">
				<img src='wolf.jpg' />
				<div class='description'>
					<p class='description_content'>This is image one. The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other by blood and family ties of affection and mutual aid. </p>
				</div>
			</div>
 
			<div class="mystuff">
				<img src='wolf1.jpg' />
				<div class='description'>
					<p class='description_content'>This is image two. The basic unit of wolf social life, is usually a family group. It is made up of animals related to each other by blood and family ties of affection and mutual aid. </p>
				</div>
			</div>
 
			<div class="mystuff">
				<img src='wolf2.jpg' />
				<div class='description'>
					<p class='description_content'>This is image three. The basic unit of wolf social life, is usually a family group. It is made up of animals related to each other by blood and family ties of affection and mutual aid. </p>
				</div>
			</div>
 
		</div> <!-- end of div cover -->
	</div>  <!-- end of div myslide -->

#myslide {width:425px;overflow:hidden;position: relative;height:276px;margin-bottom:20px}
#myslide .cover{
		width:1275px; /*------- class mystuff width * number of mystuff divs (425 * 3 = 480)---------- */
		position: absolute;
		height:276px;
	}
 
	#myslide .mystuff {width:425px;float:left;padding:20px 0;}
 
	.button1,.button2,.button3{background:#999;padding:6px;display:block;float:left;margin-right:5px;}
	.active{background:#111;padding:6px;display:block;float:left;outline:none;}
	.clear{clear:both;}
 
	div.description{
	position:absolute; /* absolute position (so we can position it where we want)*/
	bottom:0px; /* position will be on bottom */
	width:425px;
	/* styling bellow */
	background-color:black;
	font-family: 'tahoma';
	font-size:15px;
	color:white;
	opacity:0.6; /* transparency */
	filter:alpha(opacity=60); /* IE transparency */
	}
 
	p.description_content{padding:10px;margin:0px;}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
$(document).ready(function(){$('#button a').click(function(){var integer=$(this).attr('rel');$('#myslide .cover').animate({left:-425*(parseInt(integer)-1)})
$('#button a').each(function(){$(this).removeClass('active');if($(this).hasClass('button'+integer)){$(this).addClass('active')}});});});
</script>