;(function () {

// берем индекс из массива. при нажатии на кнопку хранимый индекс картинки
// увеличивается на единицу, а left увеличивается на цифру из массива по этому индексу.
// что-то типо псевдокода
// if жмакнули на кнопку
// мы получили список картинок class = "listImg"
// i индекс массива увеличился на 1
// left увеличивается на ширину картинки (что есть i-й элемент массива list)

// данная функция добавляет в себя необходимые компоненты вроде кнопок и тд.
// слово this делает все остальное тело функции контекстом (если я правильно понимаю)
var slider = function() {
    var index = 1;
    this.btns = document.querySelectorAll ( ".btn" ); // кнопки
    this.box = document.querySelector ( ".slider" ); // div контейнер в котором хранится div, который в свою очередь хранит картинки
    this.slidesBox = document.querySelector ( ".listImg" ); // div, который в свою очередь хранит картинки
    this.slides = document.querySelectorAll ( ".slide" ); // картинки

    this.widthList = setImgWidth(); // поскольку функцию setImgWidth добавили в slider, то можно ее здесь запустить,
                                    // чтобы позже результат ее взять для slider.next или slider.prev
}
// предыдущую функцию немного переделал и тоже закинул в slider
slider.setImgWidth = function () {
    //получаем все картинки в нужном блоке
    var img = this.slidesBox;
    var list = [];
    //добавляем в массив ширину картинок
    for (var i = 0; i < img.length; i++) {
        var width = img[i].clientWidth;
        list.push(width);
    }
    return list;
}
// добавляем новую функцию к функции slaider. Она добавляет обработчик нажатия кнопок
slider.indexPosition = function (){
    var max = this.btns.length; //количество кнопок

    for (var i = 0; i < max; i++) {
        this.btns[i].addEventListener ( "click", slider[this.btns[i].id].bind(null, this)); // Вот здесь сложная для меня херня, нашел в интернете.
                                                                                            // повесили обработчик, засунули его в функцию слайдер и при помощи bind
    }                                                                                       // добавили доступ slider.prev и slider.next к объектам this в функции slider
}
// здесь обрабатываются нажатия на кнопки
// в функцию slider добавляются еще две новые функции
slider.prev = function() {
    /*var img = this.slidesBox;
    for ( index < img.length; index++ ) {
        slidesBox.style.left = +this.widthList[index] + "px";
        break;
    }*/
}

slider.next = function() {
    // было принято решение сделать цикл, который берет значение переменной index
    // увеличивает его на едbницу, вместе с тем передвигает одну картинку на величину,
    // равную ширине картинки. после этого цикл прекращает работу. при этом index хранит
    // в себе увеличенное значение

    var img = this.slidesBox;
    for ( index < img.length; index++ ) {
        slidesBox.style.left = -this.widthList[index] + "px";
        break;
    }
}
})();