Jquery featured content slider mnanşet yada önemli haberlerin,yazıların yada içerikerlin gösterilmesinde kullanılabilecek güzel uygulamalardan birisidir.

sayfanızın head ve /head tagları arasına aşağıdaki kodu ekleyin

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script>
<script type="text/javascript">
	$(function(){
		$("#main-photo-slider").codaSlider();
	});
</script>

Sitenizin Css dosyasına aşağıdakileri ekleyin;

/*
	Featured Content Slider
	by: Chris Coyier
*/
*											{ margin: 0; padding: 0; }
body 										{ font-family: Arial, Helvetica, sans-serif; font-size: 10px; }
/*
	UTILITY STYLES
*/				  				  
.floatLeft 									{ float: left; margin-right: 10px;}
.floatRight									{ float: right; }
.clear 										{ clear: both; }
a											{ outline: none; }
/*
	PAGE STRUCTURE
*/
#page-wrap 									{ width: 500px; margin: 25px auto; position: relative; min-height: 500px;
											  background: url(images/bg.png) top center; }
/*
	TYPOGRAPHY
*/
ul											{ list-style: square inside; }
a, a:visited								{ color: #729dff; text-decoration: none; }
a:hover, a:active							{ color: white; }
blockquote									{ padding: 0 20px; margin-left: 20px; border-left: 20px solid #ccc; font-size: 14px;
									  		  font-family: Georgia, serif; font-style: italic; margin-top: 10px;}
/*
	SLIDER
*/
.slider-wrap								{ width: 419px; position: absolute; top: 87px; left: 40px; }
.stripViewer .panelContainer
.panel ul									{ text-align: left; margin: 0 15px 0 30px; }
.stripViewer								{ position: relative; overflow: hidden; width: 419px; height: 285px; }
.stripViewer .panelContainer				{ position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel			{ float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav			{ display: none; }
.nav-thumb 									{ border: 1px solid black; margin-right: 5px; }
#movers-row									{ margin: -43px 0 0 62px; }
#movers-row div								{ width: 20%; float: left; }
#movers-row div a.cross-link 				{ float: right; }
.photo-meta-data							{ background: url(images/transpBlack.png); padding: 10px; height: 30px;
											  margin-top: -50px; position: relative; z-index: 9999; color: white; }
.photo-meta-data span 						{ font-size: 13px; }
.cross-link									{ display: block; width: 62px; margin-top: -14px;
											  position: relative; padding-top: 15px; z-index: 9999; }
.active-thumb 								{ background: transparent url(images/icon-uparrowsmallwhite.png) top center no-repeat; }

eklentiyi kullanmak istediğiniz kısmada aşağıdaki html kod bloğunu ekleyin;

<div class="slider-wrap">
	<div id="main-photo-slider" class="csw">
		<div class="panelContainer">
			<div class="panel" title="Panel 1">
				<div class="wrapper">
					<!-- REGULAR IMAGE PANEL -->
					<img src="images/tempphoto-1.jpg" alt="temp" />
					<div class="photo-meta-data">
						Photo Credit: <a href="http://flickr.com/photos/astrolondon/2396265240/">Kaustav Bhattacharya</a><br />
						<span>"Free Tibet" Protest at the Olympic Torch Rally</span>
					</div>
				</div>
			</div>
			<div class="panel" title="Panel 2">
				<div class="wrapper">
					<!-- PANEL CONTENT -->
				</div>
			</div>