Слайдер основанный на плагине 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;}

javascript

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script src="jcarousellite_1.0.1c5.js" type="text/javascript"></script>
<script type="text/javascript">

$(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>

СКАЧАТЬСкачек: 1547
127,56 Kb
Кто скачал?

ДЕМОПосмотреть
пример