Пытаюсь написать слайдер с автоматическим переключением, вроде получилось, но код выглядит ужасно.Прошу помощи в оценке.
var sliderInit = (function(){
'use strict'
function Slider() {
this.controls = document.querySelector('.controls');
this.buttons = document.querySelectorAll('.controls__btn');
this.slider = document.querySelector('.slider');
this.slide = document.querySelector('.slide');
this.start = function(time) {
this.updateClass();
this.changeSlide();
this.timer(time)
}
}
Slider.prototype.updateClass = function() {
var that = this;
this.controls.onclick = function(e) {
var btn = e.target;
if (btn.tagName === "A") {
e.preventDefault();
that.checkClass("active");
that.changeSlide(btn);
btn.classList.toggle('active');
}
}
}
Slider.prototype.checkClass = function(className) {
[].filter.call(this.buttons, function(btn) {
if (btn.classList.contains(className)) {
btn.classList.remove(className);
}
});
}
Slider.prototype.timer = function(time) {
var i = 0,
that = this;
length = this.buttons.length;
var timerId = setInterval(function(){
that.checkClass('active');
that.buttons[i].classList.toggle('active');
var btn = that.buttons[i];
that.changeSlide(btn);
i++;
if (i === length) {
i = 0;
};
},time);
}
Slider.prototype.changeSlide = function(btn) {
btn = btn || this.buttons[0];
var index = btn.getAttribute('data-index');
var width = -(this.slide.clientWidth) - 50; //margin-right
switch(index) {
case "1":
this.slider.style.webkitTransform = "translate3d(0px, 0px, 0px)";
break;
case "2":
this.slider.style.webkitTransform = "translate3d(" + width + "px, 0px, 0px)";
break;
case "3":
this.slider.style.webkitTransform = "translate3d("+ width * 2 + "px, 0px, 0px)";
}
}
return Slider;
})();
var slider = new sliderInit();
slider.start(2000);
