Easy Slider - простой слайдер

Простой слайдер на jQuery - easy slider - с элементами навигации по изображениям. У слайдера около 20 настроек.

HTML

    <div id="content">
        <div id="slider">
            <ul>                
                <li><a href="#"><img src="images/01.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/03.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/02.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/04.jpg" alt="" /></a></li>
                <li><a href="#"><img src="images/05.jpg" alt="" /></a></li>            
            </ul>
        </div>
    </div>

CSS

/* image replacement */
#prevBtn, #nextBtn, #slider1prev, #slider1next {
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
  text-indent: -8000px;
}

/* // image replacement */
#container {
  margin: 0 auto;
  position: relative;
  text-align: left;
  width: 696px;
  margin-bottom: 2em;
}
#contents {
  position: relative;
}
/* Easy Slider */
#slider ul, #slider li, #slider2 ul, #slider2 li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#slider2 {
  margin-top: 1em;
}
#slider li, #slider2 li {
  /* 
                 define width and height of list item (slide)
                 entire slider area will adjust according to the parameters provided here
         */
  width: 696px;
  height: 241px;
  overflow: hidden;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
  display: block;
  width: 30px;
  height: 77px;
  position: absolute;
  left: -30px;
  top: 144px;
  z-index: 1000;
}
#nextBtn, #slider1next {
  left: 696px;
}
#prevBtn a, #nextBtn a, #slider1next a, #slider1prev a {
  display: block;
  position: relative;
  width: 30px;
  height: 77px;
  background: url('../images/btn_prev.png') no-repeat 0 0;
}
#nextBtn a, #slider1next a {
  background: url('../images/btn_next.png') no-repeat 0 0;
}

/* numeric controls */
ol#controls {
  margin: 1em 0;
  padding: 0;
  height: 28px;
}
ol#controls li {
  margin: 0 10px 0 0;
  padding: 0;
  float: left;
  list-style: none;
  height: 28px;
  line-height: 28px;
}
ol#controls li a {
  float: left;
  height: 28px;
  line-height: 28px;
  border: 1px solid #ccc;
  background: #DAF3F8;
  color: #555;
  padding: 0 10px;
  text-decoration: none;
}
ol#controls li.current a {
  background: #5DC9E1;
  color: #fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {
  outline: none;
}

JS

Подключаем jQuery и плагин:

    <script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/jаvascript" src="js/easySlider1.7.js"></script>

$(document).ready(function(){    
   $("#slider").easySlider({
       auto: true, 
       continuous: true
   });
});

Опции по умолчанию:

• prevId:         'prevBtn',
• prevText:         'Previous',
• nextId:         'nextBtn',
• nextText:         'Next',
• controlsShow:    true,
• controlsBefore:    '',
• controlsAfter:    '',   
• controlsFade:    true,
• firstId:         'firstBtn',
• firstText:         'First',
• firstShow:        false,
• lastId:         'lastBtn',   
• lastText:         'Last',
• lastShow:        false,               
• vertical:        false,
• speed:             800,
• auto:            false,
• pause:            2000,
• continuous:        false,
• numeric:         false,
• numericId:         'controls'