Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 16.05.2017, 21:30   #1
narem
Пользователь
 
Регистрация: 22.11.2015
Сообщений: 15
По умолчанию Как отредактировать слайдер

В общем взял готовый слайдер, но была проблема в том, что он для 1 картинки на экране, а мне надо 2. Я увеличил див, что бы в него попадало 2 картинки, но теперь появилась проблема в том, что после прокрутки 3 листов-он больше не показывает картинки, я понимаю в чем ошибка(слайдер прокручивает по размеру дива 5 раз,а по скольку размер увеличился то он и показывает пустое место). Помогите отредактировать т.к я в js пока ноль
HTML
Код:
<div class="slider-box">
	<div class="slider">  
		<img src="img/slide01.jpg" alt="">
			<img src="img/slide02.jpg" alt="">
			<img src="img/slide03.jpg" alt="">
			<img src="img/slide04.jpg" alt="">
			<img src="img/slide05.jpg" alt="">
	</div>
	<div class="prev"></div>
	<div class="next"></div>
</div>
CSS
Код:
.slider-box{
  position:relative;
  width: 1440px;
  height:510px;
  overflow:hidden;
}
.slider{
  position:relative;
  width:10000px;
  height:210px;
}
.slider img{
  float:left;
  width: 720px;
  border-radius: 16px;
}
.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(../img/slider_controls.png) no-repeat 0 0;
}
.slider-box .next{
  right:10px;
  background:url(../img/slider_controls.png) no-repeat -29px 0;
}
js
Код:
$(function() {      
  var slider = $('.slider'),
    sliderContent = slider.html(),                      // Содержимое слайдера
    slideWidth = $('.slider-box').outerWidth(),         // Ширина слайдера
    slideCount = $('.slider img').length,               // Количество слайдов
    prev = $('.slider-box .prev'),                      // Кнопка "назад"
    next = $('.slider-box .next'),                      // Кнопка "вперед"
    sliderInterval = 7300,                              // Интервал смены слайдов
    animateTime = 1500,                                 // Время смены слайдов
    course = 1,                                         // Направление движения слайдера (1 или -1)
    margin = - slideWidth;                              // Первоначальное смещение слайдов
 
  $('.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){     // Если слайдер дошел до конца
      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 слайд.
  }
 
  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 принимает первоначальное значение
  });
 
  slider.add(next).add(prev).hover(function() {         // Если курсор мыши в пределах слайдера
    sliderStop();                                       // Вызывается функция sliderStop() для приостановки работы слайдера
  }, nextSlide);                                        // Когда курсор уходит со слайдера, анимация возобновляется.
 
  nextSlide();                                          // Вызов функции nextSlide()
});
narem вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать слайдер кликабельным? Или как добавить к слайдеру ссылки? Ленка32434 HTML и CSS 2 23.01.2017 11:34
Как сделать кликабельным слайдер? Dashi75 HTML и CSS 0 12.01.2017 16:28
Как сделать слайдер кликабельным? Или как добавить к слайдеру ссылки? Ленка32434 Помощь студентам 0 25.06.2016 21:07
Слайдер контента (как в галерее) Notan1310 Java Мобильная разработка (Android) 0 21.12.2015 10:06
подсобите как содрать слайдер!!!! abonim05 JavaScript, Ajax 2 04.12.2012 16:42