Форум программистов
 
Расширенный поиск
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

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

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

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

В общем взял готовый слайдер, но была проблема в том, что он для 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 вне форума   Ответить с цитированием
Ответ



Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

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




21:20.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.

купить трафик


как улучшить посещаемость, а также решения по монетизации сайтов, видео и приложений

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru