Слайдер делается на основе созданного ранее слайдера с кнопки "вперед" и "назад".

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="">
        <img src="images/slide04.jpg" alt="">
        <img src="images/slide05.jpg" alt="">
     </div>
     <ul class="bullets"></ul>
    <div class="prev"></div>
    <div class="next"></div>
</div>
 

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

.slider-box{
  position:relative;
  width:320px;
  height:210px;
  overflow:hidden;
}
.slider{
  position:relative;
  width:10000px;
  height:210px;
}
.slider img{
  float:left;
}
.slider-box .prev, .slider-box .next{
  position:absolute;
  top:100px;
  display:block;
  width:29px;
  height:29px;
  cursor:pointer;
}
.slider-box .prev{
  left:10px;
  background:url(../images/slider_controls.png) no-repeat 0 0;
}
.slider-box .next{
  right:10px;
  background:url(../images/slider_controls.png) no-repeat -29px 0;
}
.bullets{
  position:absolute;
  bottom:10px;
  left:130px;
  height:11px;
  padding:0;
  margin:0;
  list-style:none;
}
.bullets li{
  width:11px;
  height:11px;
  margin:0 3px 0 0;
  padding:0;
  float:left;
  background:url(../images/slider_controls.png) no-repeat 0 -30px;
}
.bullets li.active{
  background-position:0 -42px;
}

Скрипт

$(function() {      
  var slider = $('.slider'),
    sliderContent = slider.html(),                      // Содержимое слайдера
    slideWidth = $('.slider-box').outerWidth(),         // Ширина слайдера
    slideCount = $('.slider img').length,               // Количество слайдов
    prev = $('.slider-box .prev'),                      // Кнопка "назад"
    next = $('.slider-box .next'),                      // Кнопка "вперед"
    slideNum = 1,                                       // Номер текущего слайда
  index =0,
  clickBullets=0,
    sliderInterval = 3300,                              // Интервал смены слайдов
    animateTime = 1000,                                 // Время смены слайдов
    course = 1,                                         // Направление движения слайдера (1 или -1)
    margin = - slideWidth;                              // Первоначальное смещение слайдов
 
  for (var i=0; i<slideCount; i++)                      // Цикл добавляет буллеты в блок .bullets
  {
    html=$('.bullets').html() + '<li></li>';          // К текущему содержимому прибавляется один буллет
    $('.bullets').html(html);                         // и добавляется в код
  }
  var  bullets = $('.slider-box .bullets li')          // Переменная хранит набор буллитов
 
 
  $('.slider-box .bullets li:first').addClass('active');  
  $('.slider img:last').clone().prependTo('.slider');   // Копия последнего слайда помещается в начало.
  $('.slider img').eq(1).clone().appendTo('.slider');   // Копия первого слайда помещается в конец.  
  $('.slider').css('margin-left', -slideWidth);         // Контейнер .slider сдвигается влево на ширину одного слайда.
 
  function nextSlide(){                                 // Запускается функция animation(), выполняющая смену слайдов.
    interval = window.setInterval(animate, sliderInterval);
  }
 
  function animate(){
    if (margin==-slideCount*slideWidth-slideWidth  && course==1){     // Если слайдер дошел до конца
      slider.css({'marginLeft':-slideWidth});           // то блок .slider возвращается в начальное положение
      margin=-slideWidth*2;
    }else if(margin==0 && course==-1){                  // Если слайдер находится в начале и нажата кнопка "назад"
      slider.css({'marginLeft':-slideWidth*slideCount});// то блок .slider перемещается в конечное положение
      margin=-slideWidth*slideCount+slideWidth;
    }else{                                              // Если условия выше не сработали,
      margin = margin - slideWidth*(course);            // значение margin устанавливается для показа следующего слайда
    }
    slider.animate({'marginLeft':margin},animateTime);  // Блок .slider смещается влево на 1 слайд.
 
    if (clickBullets==0){                               // Если слайдер сменился не через выбор буллета
    bulletsActive();                                // Вызов функции, изменяющей активный буллет
  }else{                                              // Если слайдер выбран с помощью буллета
    slideNum=index+1;                               // Номер выбранного слайда
  }
  }
 
  function bulletsActive(){
    if (course==1 && slideNum!=slideCount){        // Если слайды скользят влево и текущий слайд не последний
    slideNum++;                                     // Редактирунтся номер текущего слайда
      $('.bullets .active').removeClass('active').next('li').addClass('active'); // Изменить активный буллет
  }else if (course==1 && slideNum==slideCount){       // Если слайды скользят влево и текущий слайд последний
    slideNum=1;                                     // Номер текущего слайда
    $('.bullets li').removeClass('active').eq(0).addClass('active'); // Активным отмечается первый буллет
    return false;
  }else if (course==-1  && slideNum!=1){              // Если слайды скользят вправо и текущий слайд не последни
    slideNum--;                                     // Редактирунтся номер текущего слайда
      $('.bullets .active').removeClass('active').prev('li').addClass('active'); // Изменить активный буллет  
    return false;  
  }else if (course==-1  && slideNum==1){              // Если слайды скользят вправо и текущий слайд последни
    slideNum=slideCount;                            // Номер текущего слайда
    $('.bullets li').removeClass('active').eq(slideCount-1).addClass('active'); // Активным отмечается последний буллет
  }
  }
 
  function sliderStop(){                                // Функция преостанавливающая работу слайдера      
    window.clearInterval(interval);
  }
 
  prev.click(function() {                               // Нажата кнопка "назад"
    if (slider.is(':animated')) { return false; }       // Если не происходит анимация
    var course2 = course;                               // Временная переменная для хранения значения course
    course = -1;                                        // Устанавливается направление слайдера справа налево
    animate();                                          // Вызов функции animate()
    course = course2 ;                                  // Переменная course принимает первоначальное значение
  });
  next.click(function() {                               // Нажата кнопка "назад"
    if (slider.is(':animated')) { return false; }       // Если не происходит анимация
    var course2 = course;                               // Временная переменная для хранения значения course
    course = 1;                                         // Устанавливается направление слайдера справа налево
    animate();                                          // Вызов функции animate()
    course = course2 ;                                  // Переменная course принимает первоначальное значение
  });
  bullets.click(function() {                            // Нажат один из буллетов
    if (slider.is(':animated')) { return false; }       // Если не происходит анимация  
  sliderStop();                                       // Таймер на показ очередного слайда выключается
  index = bullets.index(this);                        // Номер нажатого буллета
  if (course==1){                                     // Если слайды скользят влево
    margin=-slideWidth*index;                       // значение margin устанавливается для показа следующего слайда
  }else if (course==-1){                              // Если слайды скользят вправо
    margin=-slideWidth*index-2*slideWidth;
  }
  $('.bullets li').removeClass('active').eq(index).addClass('active');  // Выбранному буллету добавляется сласс .active
  clickBullets=1;                                     // Флаг информирующий о том, что слайд выбран именно буллетом
  animate();
  clickBullets=0;
  });
 
  slider.add(next).add(prev).hover(function() {         // Если курсор мыши в пределах слайдера
    sliderStop();                                       // Вызывается функция sliderStop() для приостановки работы слайдера
  }, nextSlide);                                        // Когда курсор уходит со слайдера, анимация возобновляется.
 
  nextSlide();                                          // Вызов функции nextSlide()
});

Ниже расположен рабочий пример слайдера.

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

    Комментарии  

    0 #2 profile 31.10.2018 20:15
    Need cheap hosting? Try webhosting1st, just $10 for an year.

    Цитировать
    -16 #1 Incognito 27.10.2014 19:13
    Жаль, исходников нет :sigh:
    Цитировать

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


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