Слайдер с постраничной навигацией

Слайдер основанный на плагине jCarouselLite с прикрученной навигацией по слайдам. Вместо изображений можно вставить и любой текст.

HTML

<div id="slidebox">
<div class="next"></div>
<div class="previous"></div>
<div class="thumbs">
<a href="#" onclick="" class="1 thumbActive">1</a> 
<a href="#" onclick="" class="2">2</a> 
<a href="#" onclick="" class="3 ">3</a> 
<a href="#" onclick="" class="4">4</a> 
</div>
    <ul>
        <li><img src="1.jpg" alt="змея"/></li>
        <li><img src="2.jpg" alt="змея"/></li>
        <li><img src="3.jpg" alt="змея"/></li>
        <li><img src="4.jpg" alt="змея"/></li>
    </ul>
</div>

CSS

body {
  margin: 0;
  padding: 0;
  background: #fff;
}
#slidebox {
  position: relative;
  border: 1px solid #ccc;
  margin: 40px auto;
  overflow: hidden;
}
#slidebox, #slidebox ul {
  width: 600px;
  height: 300px;
}
#slidebox, #slidebox ul li {
  width: 600px;
  height: 300px;
}
#slidebox ul li {
  position: relative;
  left: 0;
  background: #eee;
  float: left;
  list-style: none;
  padding: 0px 0px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 13px;
}
#slidebox .next, #slidebox .previous {
  position: absolute;
  z-index: 2;
  display: block;
  width: 21px;
  height: 21px;
  top: 139px;
}
#slidebox .next {
  right: 0;
  margin-right: 10px;
  background: url(slidebox_next.png) no-repeat left top;
}
#slidebox .next:hover {
  background: url(slidebox_next_hover.png) no-repeat left top;
}
#slidebox .previous {
  margin-left: 10px;
  background: url(slidebox_previous.png) no-repeat left top;
}
#slidebox .previous:hover {
  background: url(slidebox_previous_hover.png) no-repeat left top;
}
#slidebox .thumbs {
  position: absolute;
  z-index: 2;
  bottom: 10px;
  right: 10px;
}
#slidebox .thumbs a {
  display: block;
  margin-left: 5px;
  float: left;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 9px;
  text-decoration: none;
  padding: 2px 4px;
  background: url(slidebox_thumb.png);
  color: #fff;
}
#slidebox .thumbs a:hover {
  background: #fff;
  color: #000;
}
#slidebox .thumbs .thumbActive {
  background: #fff;
  color: #000;
  display: block;
  margin-left: 5px;
  float: left;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 9px;
  text-decoration: none;
  padding: 2px 4px;
}

JS

Подключаем jQuery, плагин jcarousel lite и код вызова плагина:

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="jcarousellite_1.0.1c5.js" type="text/jаvascript"></script>
<script type="text/jаvascript">
$(function() {
    $("#slidebox").jCarouselLite({
        vertical: false,
        hoverPause:true,
        btnPrev: ".previous",
        btnNext: ".next",
        visible: 1,
        start: 0,
        scroll: 1,
        circular: true,
        auto:1000,
        speed:500,               
        btnGo:
            [".1", ".2",
            ".3", ".4"],
       
        afterEnd: function(a, to, btnGo) {
                if(btnGo.length <= to){
                    to = 0;
                }
                $(".thumbActive").removeClass("thumbActive");
                $(btnGo[to]).addClass("thumbActive");
            }
    });
});
</script>