Конструктор слайдер карусель

        //Создаем шаблон 
    (function(){ 
        //Для document и индекса создаем переменные 
        var doc = document, 
            index = 1; 
        //Определяем конструктор слайдера 
        var Slider = function() { 
            //Определяем контейнер слайдера как свойство 
            this.box = doc.querySelector('.carousel-container'); 
            //Определяем контейнер-обертку слайдов как свойство 
            this.slidesBox = doc.querySelector('.carousel-slides'); 
            //Определяем непосредственно слайды как свойства 
            this.slides = doc.querySelectorAll('.slide'); 
            //Определяем кнопки как свойства 
            this.btns = doc.querySelectorAll('.btn'); 
            //Получаем значение ширины главного контейнера 
            this.size = this.box.clientWidth; 
            //Определяем точки 
            this.dots = doc.querySelectorAll('.dot'); 
             
             
             
            //Вызываем методы внутри контейнера 
            this.position(); 
            this.carousel(); 
            this.currentSlide(); 
        } 
         
        //Создаем методы для слайдера 
        //1. Метод для перемещения картинок на одну влево, чтобы первая картинка оказалась на своем месте 
        Slider.prototype.position = function() { 
            var size = this.size; 
            this.slidesBox.style.transform = `translateX(${-index * size}px)`; 
        }; 
         
        //2. Метод переключения 
        Slider.prototype.carousel = function() { 
            var i, max = this.btns.length, 
                that = this; 
            for(i = 0; i < max; i += 1) { 
                that.btns[i].addEventListener('click', Slider[that.btns[i].id].bind(null, that))//Slider[id кнопок, для вызова статических методов] bind - передача аргументов в статические функции, т.к. статические методы не имеют доступа в пространство конструктора, не видят его свойства 
            } 
        }; 
     
     
    //3. Создаем статичные методы для кнопок 
    Slider.prev = function(box) { 
        box.slidesBox.style.transition = 'transform .3s ease-in-out'; 
        var size = box.size; 
        var dots = box.dots; 
        index <= 0 ? false : index--; 
        box.slidesBox.style.transform = `translateX(${-index * size}px)`; 
        for(var i = 0; i < dots.length; i += 1) { 
            dots[i].classList.remove('active'); 
        } 
        index <= 0 ? false : dots[index - 1].classList.add('active'); 
        box.jump(); 
    }; 
     
    Slider.next = function(box) { 
        box.slidesBox.style.transition = 'transform .3s ease-in-out'; 
        var max = box.slides.length; 
        var size = box.size; 
        var dots = box.dots; 
        index >= max - 1 ? false : index++; 
        box.slidesBox.style.transform = `translateX(${-index * size}px)`; 
        for(var i = 0; i < dots.length; i += 1) { 
            dots[i].classList.remove('active'); 
        } 
        index >= max - 1 ? false : dots[index - 1].classList.add('active'); 
        box.jump(); 
    }; 
     
     
     
    //Создаем метод для плавного перехода изображений 
    Slider.prototype.jump = function() { 
        var that = this; 
        var size = this.size; 
        this.slidesBox.addEventListener('transitionend', function() { 
            that.slides[index].id === 'firstClone' ? index = 1 : index; 
            that.slides[index].id === 'lastClone' ? index = that.slides.length - 2 : index; 
            that.slidesBox.style.transition = 'none'; 
            that.slidesBox.style.transform = `translateX(${-index * size}px)`; 
        }); 
         
    }; 
     
    Slider.prototype.currentSlide = function() { 
        var i, dots = this.dots; 
        var that = this; 
        for(i = 0; i < dots.length; i += 1) { 
            dots[i].addEventListener('click', function() { 
                that.carousel(); 
            }); 
        } 
    }; 
     
    //Вызываем конструктор 
    new Slider(); 
     
    })();

    .carousel-container { 
    display: block; 
    width: 640px; 
    height: 320px; 
    margin: 0 auto; 
    overflow: hidden; 
    position: relative; 
    } 
    .carousel-slides { 
        width: 100%; 
        height: 100%; 
        position: relative; 
        top: 0; 
        left: 0; 
    } 
    img { 
        width: 100%; 
        height: 100%; 
    } 
    .slide { 
        position: absolute; 
        top: 0; 
    } 
    .slide:nth-child(1) { 
        left: 0; 
    } 
    .slide:nth-child(2) { 
        left: 100%; 
    } 
    .slide:nth-child(3) { 
        left: 200%; 
    } 
    .slide:nth-child(4) { 
        left: 300%; 
    } 
    .slide:nth-child(5) { 
        left: 400%; 
    } 
    .slide:nth-child(6) { 
        left: 500%; 
    } 
    .btn-container { 
        display: flex; 
        justify-content: space-between; 
        width: 100%; 
        position: absolute; 
        bottom: 0; 
        left: 0; 
        background-color: rgba(255,138,24,0.5); 
    } 
    .btn { 
        font-size: 24px; 
        font-weight: 600; 
        padding: 10px; 
        cursor: pointer; 
    } 
    .dots-container { 
        position: absolute; 
        right: 20px; 
        top: 80px; 
    } 
    .dot { 
        width: 20px; 
        height: 20px; 
        border: 1px solid #fff; 
        border-radius: 50%; 
        margin: 20px; 
        cursor: pointer; 
    } 
    .active { 
        background-color: red; 
    }

    <div class="carousel-container"> 
        <div class="carousel-slides"> 
            <img class="slide" id="lastClone" src="4.jpg"> 
            <img class="slide" src="1.jpg"> 
            <img class="slide" src="2.jpg"> 
            <img class="slide" src="3.jpg"> 
            <img class="slide" src="4.jpg"> 
            <img class="slide" id="firstClone" src="1.jpg"> 
        </div> 
        <div class="btn-container"> 
            <div class="btn" id="prev"> prev </div> 
            <div class="btn" id="next"> next </div> 
        </div> 
        <div class="dots-container"> 
            <div class="dot active"></div> 
            <div class="dot"></div> 
            <div class="dot"></div> 
            <div class="dot"></div> 
        </div> 
    </div>