<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>
*{margin:0px;padding:0px;}
body{padding:10px;}

#featured-slider{width:500px;height:200px;overflow:hidden;position:relative;}
#slider{width:2500px;height:200px;position:absolute;top:0px;left:0px;}
#slider div{width:500px;height:200px;float:left;position:relative;}
h2{background:url(images/titlebg.png);width:406px;height:27px;padding-top:3px;text-align:center;position:absolute;left:10px;top:10px;font:18px 'Trebuchet MS';color:#fff;}

#sayfalama{position:absolute;left:10px;bottom:10px;}
#sayfalama a{background:url(images/link.png);width:16px;height:16px;margin-right:2px;display:block;float:left;text-decoration:none;}
#sayfalama a span{display:none;}
</style>

<div id="featured-slider">
<div id="slider">
<div class="bir">
<img src="images/bir.jpg" />
    <h2>Birinci sayfa için başlık</h2>
</div>
<div class="iki">
<img src="images/iki.jpg" />
    <h2>İkinci sayfa için başlık</h2>
</div>
<div class="uc">
<img src="images/uc.jpg" />
    <h2>Üçüncü sayfa için başlık</h2>
</div>
<div class="dort">
<img src="images/dort.jpg" />
    <h2>Dördüncü sayfa için başlık</h2>
</div>
<div class="bes">
<img src="images/bes.jpg" />
    <h2>Beşinci sayfa için başlık</h2>
</div>
</div>
<div id="sayfalama">
<a href="#"><span>bir</span></a>
<a href="#"><span>iki</span></a>
<a href="#"><span>uc</span></a>
<a href="#"><span>dort</span></a>
<a href="#"><span>bes</span></a>
</div>
</div>


<script>

$(document).ready( function() {        
  var slaytSayisi = $("#slider div").length;
  var tekSlaytGenisligi  = $("#slider div").width();
  var sliderGenisligi = slaytSayisi * tekSlaytGenisligi;
  $("#slider").css({width:sliderGenisligi});
 
  var i = 0;     
  var tumgenislik = 0; 
  var genislik = $('#slider div').width();    
  
  function animasyon(px){     
      $('#slider').stop(false, false).animate({left:-px},300); 
  }

  $('#sayfalama a').click(function(){ 
    var index = $(this).index(); 
     
    var slaytSayisi = $("#slider div").length;
     
    if(index+1>slaytSayisi){
        animasyon(0);
    } else { 
        pozisyon = index * genislik;     
        animasyon(pozisyon);
        if(index == slaytSayisi-1){    //  
        i = 0;     
        }else{        
        i = index + 1; 
        } 
    }

  return false; 

  });
  
  var zamanlayici = setInterval(function() {      
    tumgenislik = i * genislik;         
    if(i==slaytSayisi-1){     
      i = -1;     
    }
    animasyon(tumgenislik);         
    i++;     
  }, 3000);         

});

</script>
size tavsiyem slayt div lerinizi mysql den çekeceksiniz sanırım while ile döndürün kaç adet veri bastırırsanız sayfaya slider o kadarını gösterecektir.

yalnız php ile çektiğiniz veri sayısını da tutun buna göre de bir iki üç gibi buton bastırırsınız sayfalama a kısmına...

not: ayrıca arkadaş slider kodunu başka bi siteden almış ancak onu yapan arkadaş sadece 5 resim için hazırlamış üzerinde değişiklik yaptım eklediğiniz içerik kadar göstermesi için...