Слайдер с постраничной навигацией
Слайдер основанный на плагине 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>Ссылки
