Еще один простой слайдер на jQuery

Для компактного расположения и одновременно удобного для пользователя поочередного показа каких-либо элементов, на сайтах часто используются различные слайдеры или как еще говорят - "карусели". Такой подход значительно уменьшает визуальный объем страницы и избавляет посетителя от долгой её прокрутки. В слайдере можно разместить различные элементы страницы, однако чаще всего, это презентации различных изображений. Принцип работы такого дополнения очень прост - посетитель сайта видит одну картинку (или блок) и элемент управления, навигации (кнопку, стрелку и т.п.), при клике на который, в этом же интерактивном блоке, показывается следующие изображение.

Самый простой вариант нецикличной "карусели" можно сделать и средствами CSS, но если требуется усложнить управление и добавить функциональности, то без скриптов не разобраться. В данных примерах я использую варианты jQuery-скрипта, поэтому не забудьте подключить этот фреймворк если будете применять эти разработки.
HTML код не будет изменяться, в данном случаи он одинаково прост для всех предложенных вариантов:

Простой, но элегантный CSS - к нему также дальнейшие манипуляции отношения иметь не будут:

.content {
 position: relative;
 border: 10px solid #FFF;
 box-shadow: 0px 0px 15px #666;
 text-align: left;
 margin: 0 auto;
 width: 600px;
 height: 450px; /*высота с учетом высоты кнопок*/
}
#simple_slider {
 overflow: hidden;
}
/*для изображений сразу задаем необходимые размеры*/
#simple_slider img {
 position: absolute;
 width: 600px;
 height: 400px;
 left:0;
 top:0;
}
.left_button,
.right_button {
 display:block;
 position: absolute;
 top: 50%; 
 z-index: 9999;
 background: #666;
 border: 1px solid #FFF;
 cursor: pointer;
 color: #FFF;
 text-align: center;
 font: normal bold 48px/48px 'Advent Pro', sans-serif;
 opacity: .5; 
 padding: 5px;
 width: 30px;
 height: 50px
}
.left_button {
 box-shadow: -2px 0px 5px #666;
 border-radius: 100px 0 0 100px;
 left: -50px; /*расположение кнопки*/
}
.right_button {
 box-shadow: 2px 0px 5px #666;
 border-radius: 0 100px 100px 0;
 right: -50px;
}
.right_button:hover,
.left_button:hover {
 color: #FFF;
 opacity: 1;
 text-decoration: none;
}

Когда все уже сделано, осталось только добавить скрипт.

Вариант самого простого цикличного слайдера без анимации

Суть заключается в следующем - по средствам CSS, изображения располагаются, как бы, "стопкой" и последняя в HTML-коде картинка (сверху-вниз), по-умолчанию будет находится "сверху", т.е. будет видна, остальные - нет, т.к. "спрятаны" за ней. Работа скрипта слайдера заключается в том, чтобы поочередно менять местами элементы в списке с помощью доступных функций.

$(function(){
$('a.left_button').click(function(){
$('#simple_slider > :first-child').appendTo('#simple_slider'); //находит первый дочерний элемент в блоке и устанавливает его в конец списка
});
$('a.right_button').click(function(){
$('#simple_slider > :last-child').prependTo('#simple_slider'); //находит последний дочерний элемент и устанавливает его в начало списка
});
});

DEMO 1

Простой циклический слайдер с анимацией

Работает также как и предыдущий вариант, но принцип немного другой:

$(function(){
$('#simple_slider img:lt(-1)').hide(); //скрываем все изображения, кроме последнего в списке

$('a.left_button').click(function(){
$('#simple_slider > img:first-child').fadeIn().appendTo('#simple_slider').end().siblings('img').fadeOut();
}); //показываем первую картинку, перемещаем в конец списка, скрываем все соседние элементы
$('a.right_button').click(function(){
$('#simple_slider > img:last-child').fadeOut().prev('img').fadeIn().end().prependTo('#simple_slider');
}); //скрываем последнее изображение, показываем предыдущие, переносим в начало
});

DEMO 2
Есть одна особенность. Если просто добавить анимацию к первому примеру таким образом:

$(function(){
$('#simple_slider img:lt(-1)').hide();

$('a.left_button').click(function(){
$('#simple_slider > img:first-child').fadeIn().appendTo('#simple_slider').siblings('img').fadeOut();
});
$('a.right_button').click(function(){
$('#simple_slider > img:last-child').fadeIn().prependTo('#simple_slider').siblings('img').fadeOut();
});

Тогда для показа первого предыдущего слайда, (первой прокрутки назад), потребуется сделать два клика по кнопке, вместо одного. Это произойдет потому что видимый элемент, сначала будет показан внизу списка, а потом, при возврате, он же будет перенесен скриптом наверх и показан снова. Следующий клик покажет предшествующие изображение
RESULT

Не циклический анимированный слайдер

Не всегда нужно давать пользователю возможность прокручивать элементы карусели бесконечно, в некоторых случаях необходимо наглядно указать что просмотрено все содержимое слайдера, т.е. остановить перелистывание при достижении последнего элемента списка. Решение этого вопроса очень простое - необходимо просто скрыть элемент управления, когда откроется последний слайд.
При данной задаче, скрипт получился таким:

$(function(){

$('#simple_slider img:lt(-1)').hide();
$('#simple_slider img:eq(-1)').addClass('counting'); //добавляем специальный класс к последнему элементу списка

$('a.right_button').hide();
$('a.left_button').click(function(){
$('#simple_slider > :first-child').fadeIn().appendTo('#simple_slider').end().siblings('img').fadeOut();
//если порядковый номер элемента меньше или равен "0"(счет начинается с нуля) - скрываем кнопку "вперед"
if($('.counting').index() <= 0){$('a.left_button').fadeOut(100);}
else {$('a.left_button, a.right_button').fadeIn();}
});
$('a.right_button').click(function(){
$('#simple_slider > :last-child').fadeOut().prev('img').fadeIn().end().prependTo('#simple_slider');
//если порядковый номер элемента больше или равен сумме всех элементов - 1 - скрываем кнопку "назад"
if($('.counting').index() >= $('#simple_slider > img').length - 1){$('a.right_button').fadeOut(100);}
else {$('a.left_button, a.right_button').fadeIn();}
});
});

DEMO 3

На этом все. Как и прежде - замечания, критика и пожелания принимаются в комментариях. Всем успехов.

MagentaWAVE