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

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

  Самый простой вариант нецикличной "карусели" можно сделать и средствами CSS, но если требуется усложнить управление и добавить функциональности, то без скриптов не разобраться. В данных примерах я использую варианты jQuery-скрипта, поэтому не забудьте подключить этот фреймворк если будете применять эти разработки.
  HTML код не будет изменяться, в данном случаи он одинаково прост для всех предложенных вариантов:
<div class='content'>
<!--элементы навигации - кнопки "влево" и "вправо", дополнительные свойства запрещают выделение кнопок-->
  <a onselectstart="return false" onmousedown="return false" class='left_button'>&lt;</a>
  <a onselectstart="return false" onmousedown="return false" class='right_button'>&gt;</a>
  <div id='simple_slider'>
   <img src='img/1.jpg' />
   <img src='img/2.jpg' />
   <img src='img/3.jpg' />
   <img src='img/4.jpg' />
  </div>
</div>
  Простой, но элегантный 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

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

©http://magentawave.com

Комментариев нет:

Отправка комментария

Следующее Предыдущее

BestProject