JQuery. Простой слайдер.

Главная > JQuery. Простой слайдер.

Нужен простой слайдер с автоматической прокруткой. Приступим...

Описание работы слайдера.

Слайды будут выстроены в линию, и через определенное время будут прокручиваться.

slider img

Красной рамкой показана видимая часть слайдера.

В конец слайдера нужно продублировать первый слайд. Это нужно для того, чтоб обеспечить прокрутку от третьего слайда к первому. Также нужно добавить последний слайд в начало для возможности прокрутки в обратном направлении от первого слайда к третьему. Ниже показана работа слайдера в прямом направлении.

easy slider

Когда слайдер доходит до конца, на место последнего слайда мгновенно помещается его копия из начала слайдера. Затем цикл снова повторяется. Таким образом создается иллюзия бесконечного слайдера.

HTML разметка

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

<div class="slider-box">
  <div class="slider">
    <img src="images/slide01.jpg" alt="" /> 
    <img src="images/slide02.jpg" alt="" /> 
    <img src="images/slide03.jpg" alt="" />
  </div>
</div>

Стили слайдера

.slider-box{
  width:320px;
  height:210px;
  overflow:hidden;
}
.slider{
  position:relative;
  width:10000px;
  height:210px;
}
.slider img{
  float:left;
  z-index:0;
}

Контейнер .slider-box задает размеры слайдера. С помощью свойства overflow:hidden скрываются все элементы которые не входят в область внутри элемента.

Для контейнера .slider задается большая ширина. Это нужно для того, чтоб в него встрочку поместились все слайды.

Слайды выравниваются с помощью свойства float:left.

Ниже показано схематичное расположение блоков слайдера.

easy-slider-shem

Скрипт

Движение слайдов будет осуществляться с помощью плавного изменения свойства margin-left контейнера .slider.

$(function() {      
  var width=$('.slider-box').width();                     // Ширина слайдера.
      interval = 4000;                                    // Интервал смены слайдов.
 
  $('.slider img:last').clone().prependTo('.slider');     // Копия последнего слайда помещается в начало.
  $('.slider img').eq(1).clone().appendTo('.slider');     // Копия первого слайда помещается в конец.  
  $('.slider').css('margin-left', -width);                // Контейнер .slider сдвигается влево на ширину одного слайда.
  setInterval('animation()',interval);                    // Запускается функция animation(), выполняющая смену слайдов.
});
function animation(){
 
  var margin = parseInt($('.slider').css('marginLeft'));  // Текущее смещение блока .slider
      width=$('.slider-box').width(),                     // Ширина слайдера.
      slidersAmount=$('.slider').children().length;       // Количество слайдов в слайдере.
  if(margin!=(-width*(slidersAmount-1)))                  // Если текущий слайд не последний,
  {
    margin=margin-width;                                  // то значение margin уменьшается на ширину слайда.
  }else{                                                  // Если показан последний слайд,
    $('.slider').css('margin-left', -width);              // то блок .slider возвращается в начальное положение,
    margin=-width*2;         
  }
  $('.slider').animate({marginLeft:margin},1000);          // Блок .slider смещается влево на 1 слайд.
};

В итоге получился простой слайдер с бесконечной автоматической прокруткой.

Скачать архив

Следующим шагом будет добавление к слайдеру кнопок "Вперед" и "Назад".

>> JQuery. Простой слайдер с кнопками "Вперед" и "Назад" (2/3)
>> JQuery. Простой слайдер с кнопками управления (3/3)

Отличная статья, как раз нужно добавить на сайт слайдер, только возник вопрос, что нужно изменить в коде что бы в слайдере было видно сразу 4 картинки, и они сдвигались на ширину одной, очень нужно!!

Спасибо огромное!!

Сделал простой глайдер на 3 картинки http://coderpro.ru/tmp/easy-glider.zip Пока это черновой вариант на время. Через пару дней добавлю статью по созданию глайдера. Там подробно опишу его создание и сделаю его более универсальным.

Цитировать

+1 #3 Ваня 25.06.2015 15:35

Отличная статья, как раз нужно добавить на сайт слайдер, только возник вопрос, что нужно изменить в коде что бы в слайдере было видно сразу 4 картинки, и они сдвигались на ширину одной, очень нужно!!

Спасибо огромное!!

Цитировать

+3 #2 Михаил 24.04.2015 08:30

Цитирую Михаил:

Здравствуйте.
Сделал все по аналогии, но при перемотке картинка оставляет белое поле, после чего возникает вторая картинка (разрыв). Как сделать их сплошной лентой, как Вы думаете?

В скрипте был небольшой косяк. Сейчас все поправил и добавил ссылку на архив с примером.

Цитировать

+1 #1 Михаил 06.04.2015 23:50

Здравствуйте.
Сделал все по аналогии, но при перемотке картинка оставляет белое поле, после чего возникает вторая картинка (разрыв). Как сделать их сплошной лентой, как Вы думаете?

Цитировать

Обновить список комментариев

Добавить комментарий

JComments