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

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

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

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 слайд.
};

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

slide05 slide05 slide05 slide05 slide05


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

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



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

Комментарии  

0 #6 profile 27.10.2018 20:27
Need cheap hosting? Try webhosting1st, just $10 for an year.

Цитировать
+1 #4 Михаил 01.07.2015 06:43
Цитирую Ваня:
Отличная статья, как раз нужно добавить на сайт слайдер, только возник вопрос, что нужно изменить в коде что бы в слайдере было видно сразу 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
Здравствуйте.
Сделал все по аналогии, но при перемотке картинка оставляет белое поле, после чего возникает вторая картинка (разрыв). Как сделать их сплошной лентой, как Вы думаете?
Цитировать

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


Защитный код
Обновить