В общем взял готовый слайдер, но была проблема в том, что он для 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()
});