slider( "listImg", "nextSlide", "prevSlide", "slide", "slider" );
function slider( mainContainerClass, mainNextButton, mainPrevButton, mainImages, mainSliderContainer )
{
var sliderLeft = document.getElementById( mainNextButton );
var sliderRight = document.getElementById( mainPrevButton );
var imgBox = document.getElementById( mainContainerClass );
var sliderBoxWidth = document.getElementById( mainSliderContainer );
var list = [0]; // в листе хранить накопительную сумму. Хранится
var index = 0;
var width = 0;
var IMGBOXWIDTH = 1000;
if( imgBox == null ) {
// выкидываем ошибку и завершаем код
console.log( "Произошла ошибка. imgBox == null. Указан неверный Id элемента или неверно получен элемент из DOM" );
return;
}
if ( sliderLeft == null ) {
console.log( "Произошла ошибка. sliderLeft == null. Указан неверный Id элемента или неверно получен элемент из DOM" );
return;
}
if ( sliderRight == null ) {
console.log( "Произошла ошибка. sliderRigth == null. Указан неверный Id элемента или неверно получен элемент из DOM" );
return;
}
var images = imgBox.getElementsByClassName( mainImages );
if ( images.length == 0 ) {
console.log( "Произошла ошибка. images == null. Указан неверный Id элемента или неверно получен элемент из DOM" );
return;
}
if( sliderBoxWidth == null ) {
// выкидываем ошибку и завершаем код
console.log( "Произошла ошибка. sliderBox == null. Указан неверный Id элемента или неверно получен элемент из DOM" );
return;
}
//imgBox.style.transform = 'translateX(' + ( -images[0].clientWidth ) + 'px)';
//var imgBoxWidth = sliderBoxWidth.offsetWidth;
// здесь этот цикл добавлен именно здесь сугубо в исследовательских целях, чтобы в консоле просматривать все изменения
for (var i = 0; i < images.length; i++) {
width = images[i].clientWidth;
list.push(width);
}
var left = 0;
sliderLeft.onclick = function() {
/*if ( конечные условия ) {
переставить картинку аппендом
заново рассчитать массив картинок
зацентрировать
}*/
index++;
//imgBox.appendChild( imgBox.children[ 0 ] );
left = left - list[index];
sliderGo();
}
sliderRight.onclick = function() {
//imgBox.insertBefore( imgBox.children[ images.length - 1 ], imgBox.children[ 0 ] );
left = left + list[index];
index--;
sliderGo();
}
function sliderGo() {
var pictureSum = 0;
var pictureNamber = 0;
for ( var i = index+1; i <= images.length; i++) {
pictureSum += list[i]; // сумма картинок вместе с следующей обрезанной
pictureNamber = i; // номер обрезанной картинки
if ( pictureSum >= IMGBOXWIDTH ) {
// написал много логов, чтобы контролировать все на этапе разработки, пока не убираю
var fullImgWidth = pictureSum - list[pictureNamber]; // сумма целых картинок
var step = (( IMGBOXWIDTH - fullImgWidth ) / 2 ); // необходимый отступ
imgBox.style.left = left + step + "px";
break;
}
}
}
}