<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollto.js"></script>
<script type="text/javascript">
$(document).ready(function () {
 
 $('#hero-slider ul a').click(function () {
 
  //reset all the items
  $('.customBlock ul a').removeClass('active');
   
  //set current item as active
  $(this).addClass('active');  
   
  //scroll it to the right position
  $('.mask').scrollTo($(this).attr('rel'), 300);
   
  //disable click event
     return false;  
   
 });
 
});
</script>
 
#hero-slider {
 text-align:left;
 border:1px solid #ccc;
 width:700px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 margin:0 auto;
 font-family:arial;
}
 
#hero-slider .mask {
 float:left;
 width:550px;
 height:480px;
 margin:15px 0 0 10px;
 overflow:hidden;
}
 
#hero-slider .panel {
 width:550px;
 height:480px;
 text-align:left;
}
 
#hero-slider ul {
 margin:0;
 padding:15px 15px 0 15px;
 list-style:none;
 float:left;
 border-right:1px solid #dedede;
 height:480px;
}
 
#hero-slider ul li {
 margin:10px 0;
}
 
#hero-slider ul a {
 outline:none;  
 text-decoration: underline;
 display:block;
 width:75px;  
 height:74px;  
 text-indent:-999em;  
}
 
#hero-slider a {
 background: url(button.png) no-repeat 0 0;
}
 
#hero-slider ul a.active {
 background-position: -75px;
}
 
.panel h2 {
 padding:15px 0 0 0;
 color:#F90;
}
 
.panel p {
 color:#666;
}
 
.clear {clear:both}
 
 
 
<div id="hero-slider">
  <ul>
   <li><a href="#" rel="#panel-1" class="active">Item 1</a></li>
   <li><a href="#" rel="#panel-2">Item 2</a></li>
   <li><a href="#" rel="#panel-3">Item 3</a></li>
            <li><a href="#" rel="#panel-4">Item 3</a></li>
            <li><a href="#" rel="#panel-5">Item 3</a></li>
  </ul>
  <div class="mask">
   <div class="slider-body">
    <div class="panel" id="panel-1">
     <h2>A propos de moi</h2>
     <p>Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla nec purus convallis consequat. In condimentum orci id nisl volutpat bibendum. </p>
    </div>
    <div class="panel" id="panel-2">
     <h2>Expériences Profesionnelle</h2>
     <p>Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. </p>
    </div>
    <div class="panel" id="panel-3">
     <h2>Références</h2>
     <p>Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna.</p>
    </div>
                <div class="panel" id="panel-4">
     <h2>Compétences logiciels</h2>
     <p>Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna.</p>
    </div>
                <div class="panel" id="panel-5">
     <h2>Partenariat</h2>
     <p>Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna.</p>
    </div>
   </div>
  </div> <!-- .mask -->
  <div class="clear"></div>
 </div> <!-- #hero-slider -->