Офигенный JQuery слайдер

Офигенный JQuery слайдер

02.11.201253117

Кто-то скажет, что JQuery слайдер – это полезное дополнение для сайта, а кто-то возразит, и скажет, что это лишнее нагромождение. И те и другие будут по-своему правы, все зависит от вашего проекта и его дизайна. Согласитесь, если наш сайт о веб-дизайне, то зачем нам ставить слайдшоу с животными, как в демо. Слайдер новостей – это еще, куда ни шло. А вот реально проекту, посвященному обоям для рабочего стола, например, будет такая штука нужна, можно еще и заголовок добавить: «Самые просматриваемые обои».

Максимальное количество изображений, которое Вы можете запихнуть в JQuery слайдер, ограничивается только самим блоком. Вот в демо, я проверял, поместить можно 26 картинок. Одной больше, навигация смещается. Функционирует JQuery слайдер, как слайдшоу: через определенный интервал времени изображения переключаются, и все это по циклу. Наряду с этим, есть переключатели в виде точек. Управлять изображениями очень легко, они вставляются с помощью тега IMG. В настройках JavaScript можно изменить количество фрагментов в анимации переключения, скорость и время показа одного слайда.

Идеально для Google Chrome, в других браузерах у JQuery слайдера баги.

Код HTML



Code
<figure id="slider">
  <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



Code
<script type="text/javascript" src="jquery18.js"></script>

<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



Code
<style type="text/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.




Сохраните в социальную сеть
Комментарии (7)
Офигенный JQuery слайдер - офигенное название
1
Okschud, офигенный коммент.
0
Zversus Stark 03.11.2012 в 14:04Спам
НОРМИК
0
Ilia, офигенный ответ
1
Ребят!Скажите как убрать подпись снизу, сменить эффект на простое перелистывание и кружки поставить с права верху.
Денис, от меня большое спасибо!!! Слайдер отличный.
0
Abraham Lincoln 07.11.2012 в 19:27Спам
красивый слайдер, но почему он при первом старте так сказать затупливает, то есть видно полосы, у меня браузер сафари, может это только у меня?
0
Гость 09.01.2013 в 22:04Спам
Подскажите пожалуйста, как установить такой вот java script на ucoz?
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт