Замечательный слайдер (Coda Slider) на jQuery

<script src="/demo/112/jquery-1.2.1.pack.js" type="text/javascript"></script>  
  <script src="/demo/112/jquery-easing.1.2.pack.js" type="text/javascript"></script>  
  <script src="/demo/112/jquery-easing-compatibility.1.2.pack.js" type="text/javascript"></script>  
  <script src="/demo/112/coda-slider.1.1.1.pack.js" type="text/javascript"></script>  
   
  <style type="text/css">  
   
  p { text-align: left; margin: 15px 0 }  
   
  p, ul { font-size: 13px; line-height: 1.4em }  
   
  p a, li a { color: #39c; text-decoration: none }  
   
  p.intro { border-bottom: 1px solid #ccc; margin-bottom: 20px; padding: 20px 0 30px 0; text-align: center; width: 100% }  
   
  p#cross-links { text-align: center }  
   
  p#cross-links { border-bottom: 1px solid #ccc; margin-bottom: 30px; padding-bottom: 30px }  
   
  noscript p, noscript ol { color: #a00; font-size: 13px; line-height: 1.4em; text-align: left }  
  noscript a { color: #a00; text-decoration: underline }  
  noscript ol { margin-left: 25px; }  
   
  a:focus { outline:none }  
   
  img { border: 0 }  
   
  h3 { border-bottom: 1px solid silver; margin-bottom: 5px; padding-bottom: 3px; text-align: left }  
   

   
  .stripViewer .panelContainer .panel ul {  
  text-align: left;  
  margin: 0 15px 0 30px;  
  }  
   
  .slider-wrap {  
  margin: 20px 0;  
  position: relative;  
  width: 100%;  
  }  

  /* These 2 lines specify style applied while slider is loading */  
  .csw {width: 100%; height: 460px; background: #fff; overflow: scroll}  
  .csw .loading {margin: 200px 0 300px 0; text-align: center}  

  .stripViewer {  
  position: relative;  
  overflow: hidden;  
  border: 5px solid #000;  
  margin: auto;  
  width: 700px;  
  height: 460px;  
  clear: both;  
  background: #fff;  
  }  
   
  .stripViewer .panelContainer {  
  position: relative;  
  left: 0; top: 0;  
  width: 100%;  
  list-style-type: none;  
   
  }  
   
  .stripViewer .panelContainer .panel {  
  float:left;  
  height: 100%;  
  position: relative;  
  width: 700px;  
  }  
   
  .stripViewer .panelContainer .panel .wrapper {  
  padding: 10px;  
  }  
   
  .stripNav {  
  margin: auto;  
  }  
   
  .stripNav ul {  
  list-style: none;  
  }  
   
  .stripNav ul li {  
  float: left;  
  margin-right: 2px;  
  }  
   
  .stripNav a { /* The nav links */  
  font-size: 10px;  
  font-weight: bold;  
  text-align: center;  
  line-height: 32px;  
  background: #c6e3ff;  
  color: #fff;  
  text-decoration: none;  
  display: block;  
  padding: 0 15px;  
  }  
   
  .stripNav li.tab1 a { background: #60f }  
  .stripNav li.tab2 a { background: #60c }  
  .stripNav li.tab3 a { background: #63f }  
  .stripNav li.tab4 a { background: #63c }  
  .stripNav li.tab5 a { background: #00e }  
   
  .stripNav li a:hover {  
  background: #333;  
  }  
   
  .stripNav li a.current {  
  background: #000;  
  color: #fff;  
  }  
   
  .stripNavL, .stripNavR {  
  position: absolute;  
  top: 230px;  
  text-indent: -9000em;  
  }  
   
  .stripNavL a, .stripNavR a {  
  display: block;  
  height: 40px;  
  width: 40px;  
  }  
   
  .stripNavL {  
  left: 0;  
  }  
   
  .stripNavR {  
  right: 0;  
  }  
   
  .stripNavL {  
  background: url("/demo/112/arrow-left.gif") no-repeat center;  
  }  
   
  .stripNavR {  
  background: url("/demo/112/arrow-right.gif") no-repeat center;  
  }  
   
  </style>

<script type="text/javascript">  
  jQuery(window).bind("load", function() {  
  jQuery("div#slider1").codaSlider()  
  // jQuery("div#slider2").codaSlider()  
  // etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page.  
  });  
  </script>

<div class="slider-wrap">  
  <div id="slider1" class="csw">  
  <div class="panelContainer">  
   
  <div class="panel" title="Panel 1">  
  <div class="wrapper">  
  <h3>Panel 1</h3>  
  Coda-Slider v1.1 by Niall Doherty.  
  For info and usage instructions please see <a href="http://u.to/achBAQ" title="http://www.ndoherty.com/coda-slider/">ndoherty.com</a>  
  Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.  
  <a href="#5" class="cross-link" title="Go to Panel 5">« Previous</a> | <a href="#2" class="cross-link" title="Go to Panel 2">Next »</a>  
  </div>  
  </div>  
  <div class="panel" title="Panel 2">  
  <div class="wrapper">  
  <h3>Panel 2</h3>  
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.  
  Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.  
  <a href="#1" class="cross-link" title="Go to Panel 1">« Previous</a> | <a href="#3" class="cross-link" title="Go to Panel 3">Next »</a>  
  </div>  
  </div>  
  <div class="panel" title="Panel 3">  
  <div class="wrapper">  
  <h3>Panel 3</h3>  
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.  
  Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.  
  <a href="#2" class="cross-link" title="Go to Panel 2">« Previous</a> | <a href="#4" class="cross-link" title="Go to Panel 4">Next »</a>  
  </div>  
  </div>  
  <div class="panel" title="Panel 4">  
  <div class="wrapper">  
  <h3>Panel 4</h3>  
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.  
  Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.  
  <a href="#3" class="cross-link" title="Go to Panel 3">« Previous</a> | <a href="#5" class="cross-link" title="Go to Panel 5">Next »</a>  
  </div>  
  </div>  
  <div class="panel" title="Panel 5">  
  <div class="wrapper">  
  <h3>Panel 5</h3>  
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus porta tortor sed metus. Nam pretium. Sed tempor. Integer ullamcorper, odio quis porttitor sagittis, nisl erat tincidunt massa, eu eleifend eros nibh sollicitudin est. Nulla dignissim. Mauris sollicitudin, arcu id sagittis placerat, tellus mauris egestas felis, eget interdum mi nibh vel lorem. Aliquam egestas hendrerit massa. Suspendisse sed nunc et lacus feugiat hendrerit. Nam cursus euismod augue. Aenean vehicula nisl eu quam luctus adipiscing. Nunc consequat justo pretium orci. Mauris hendrerit fermentum massa. Aenean consectetuer est ut arcu. Aliquam nisl massa, blandit at, accumsan sed, porta vel, metus. Duis fringilla quam ut eros.  
  Sed eu ligula eget eros vulputate tincidunt. Etiam sapien urna, auctor a, viverra sit amet, convallis a, enim. Nullam ut nulla. Nam laoreet massa aliquet tortor. Mauris in quam ut dui bibendum malesuada. Nulla vel erat. Pellentesque metus risus, aliquet eget, eleifend in, ultrices vitae, nisi. Vivamus non nulla. Praesent ac lacus. Donec augue turpis, convallis sed, lacinia et, vestibulum nec, lacus. Suspendisse feugiat semper nunc. Donec nisl elit, varius sed, sodales volutpat, commodo in, elit. Proin ornare hendrerit lectus. Sed non dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis suscipit. Mauris egestas tincidunt lectus. Phasellus sed quam et velit laoreet pretium. Nunc metus.  
  <a href="#4" class="cross-link" title="Go to Panel 4">« Previous</a> | <a href="#1" class="cross-link" title="Go to Panel 1">Next »</a>  
  </div>  
  </div>  
   
  </div>  
  </div>  
  </div>  

  <p id="cross-links">  
  <a href="#1" class="cross-link">Panel 1</a> | <a href="#2" class="cross-link">Panel 2</a> | <a href="#3" class="cross-link">Panel 3</a> | <a href="#4" class="cross-link">Panel 4</a> | <a href="#5" class="cross-link">Panel 5</a>  
  </p>