Офигенный JQuery слайдер
Кто-то скажет, что JQuery слайдер – это полезное дополнение для сайта, а кто-то возразит, и скажет, что это лишнее нагромождение. И те и другие будут по-своему правы, все зависит от вашего проекта и его дизайна. Согласитесь, если наш сайт о веб-дизайне, то зачем нам ставить слайдшоу с животными, как в демо. Слайдер новостей – это еще, куда ни шло. А вот реально проекту, посвященному обоям для рабочего стола, например, будет такая штука нужна, можно еще и заголовок добавить: «Самые просматриваемые обои».
Максимальное количество изображений, которое Вы можете запихнуть в JQuery слайдер, ограничивается только самим блоком. Вот в демо, я проверял, поместить можно 26 картинок. Одной больше, навигация смещается. Функционирует JQuery слайдер, как слайдшоу: через определенный интервал времени изображения переключаются, и все это по циклу. Наряду с этим, есть переключатели в виде точек. Управлять изображениями очень легко, они вставляются с помощью тега IMG. В настройках JavaScript можно изменить количество фрагментов в анимации переключения, скорость и время показа одного слайда.
Идеально для Google Chrome, в других браузерах у JQuery слайдера баги.
Код HTML
<div class="container">
<img src="0UeVZv3.jpg" alt="Белая сова">
<img src="9J2jvF6.jpg" alt="Голубь">
<img src="0ckDaQF.jpg" alt="Белка">
<img src="3oMnVPz.jpg" alt="Кошка">
</div>
<figcaption></figcaption> <!-- slideshow caption -->
<nav id="slider-nav"></nav> <!-- navigation -->
</figure>
Код JavaScript
<script type="text/javascript">
(function($) {
var config = {
slices: 10, // Количество кусков
speed: 600, // Скорость слайдов
easing: null, // Отключение
interval: 3000 // Интервал
};
var $slider = $('#slider'),
$caption = $slider.find('figcaption'),
$container = $slider.find('.container'),
$nav = $('#slider-nav'),
$slide = $container.children(),
autoSlide = null,
$first = $slide.first();
$slide.each(function(index) {
var i = index + 1;
$nav.append('<a href="#slide-'+i+'">'+i+'</a>');
$(this).attr('id', 'slide-'+i);
});
var slice_w = $slider.width() / config.slices,
slice_h = $slider.height();
for (var i = 0; i < config.slices; i++) {
$('<div class="slice" />').css({
'position':'absolute',
'width':slice_w,
'height':slice_h,
'left':slice_w*i,
'z-index':4,
'background-color':'transparent',
'background-repeat':'no-repeat',
'background-position':'-' + slice_w*i + 'px 0'
}).appendTo($slider);
}
var $sliceOdd = $slider.find('.slice:odd').css('bottom',0),
$sliceEven = $slider.find('.slice:even').css('top',0);
$nav.find('a').on("click", function() {
$nav.find('.active').removeClass('active');
$(this).addClass('active');
var pos = $(this).index(),
text = $slide.eq(pos).attr('alt'),
bg = $slide.eq(pos).attr('src');
$slide.hide().eq(pos).trigger("load").show();
$caption.stop().animate({bottom:'-100px'}, config.speed/2);
$sliceOdd.each(function(i) {
$(this).stop().delay(i*100).animate({bottom:'-'+slice_h+'px',opacity:0}, config.speed, config.easing, function() {
$(this).css({
'background-image':'url('+bg+')',
'bottom':0,
'opacity':1
});
});
});
$sliceEven.each(function(i) {
$(this).stop().delay(i*100).animate({top:'-'+slice_h+'px',opacity:0}, config.speed, config.easing, function() {
$(this).css({
'background-image':'url('+bg+')',
'top':0,
'opacity':1
});
});
}).promise().done(function() {
$caption.html(text).stop().animate({bottom:'0'}, config.speed/2);
});
clearInterval(autoSlide);
autoSlide = setInterval(slideShow, config.interval);
return false;
}).first().addClass('active');
$caption.html($slide.first().attr('alt')).stop().animate({bottom:'0'}, config.speed);
function slideShow() {
if ($nav.find('.active').next().length) {
$nav.find('.active').next().trigger("click");
} else {
$nav.find('a').first().trigger("click");
}
}
$(function() {
$slider.css('background-image','none');
$container.show();
$caption.show();
$nav.css('opacity',1);
$slider.find('.slice').css('background-image', 'url('+$first.attr("src")+')');
autoSlide = setInterval(slideShow, config.interval);
});
})(jQuery);
</script>
Код CSS
* {margin:0;padding:0}
body {
background-color:#111;
padding:50px;
}
/* Slider */
#slider {
display:block;
border:4px solid #000;
width:448px; /* Ширина слайдера */
height:286px; /* Высота слайдера */
margin:0 auto;
background:white url('nivo-loading.gif') no-repeat 50% 50%;
overflow:hidden;
position:relative;
}
/* Для подписи */
#slider figcaption {
display:block;
background-color:black;
font:normal normal 11px Arial,Sans-Serif;
color:white;
opacity:.8;
padding:10px 15px;
position:absolute;
right:0;
bottom:-100px; /* Скрытие заголовка */
left:0;
z-index:44;
}
#slider img {
display:block;
margin:0 0;
width:448px; /* Ширина слайда*/
height:286px; /* Высота слайда */
position:absolute;
top:0;
left:0;
}
/* Навигация */
#slider-nav {
display:block;
position:absolute;
top:10px;
right:10px;
z-index:99;
}
#slider-nav a {
display:block;
float:left;
width:10px;
height:10px;
background-color:#111;
font-size:0;
color:transparent;
overflow:hidden;
text-indent:-99px;
margin:0 2px 0 0;
border:2px solid white;
border-radius:100%;
box-shadow:0 1px 2px rgba(0,0,0,.4);
}
#slider-nav .active {
background-color:#2589B4;
}
/* Скрываем все элемента JQuery слайдера до полной загрузки */
#slider .container, #slider figcaption {display:none}
#slider-nav {opacity:0}
</style>
Обратите на то, что здесь используется версия JQuery 1.8.
Воспользуйтесь сервисом uKit. Никакого кода!
