Здравствуйте !
Разбираюсь с прототипами сижу.. пишу себе радостно код и вдруг IDE выдаёт что вариэйбл не экспортед..
Смотрю консоль .. и правда :
Uncaught TypeError: Cannot read property 'pointNavigation' of undefined
at Slider.init (mainScript.js:28)
at new Slider (mainScript.js:21)
at window.onload (mainScript.js:3)
По любому ключу
undefined..
Собсно пишу я просто слайдер и ошибки в логике искать не надо.
А вот как же правильно обращаться к хешу - вопрос жизни и смерти !
Инициализация экземпляра :
window.onload = function(){
let featuresSlider = new Slider({
element: ".slider",
wrapper: ".sliderItems",
slides: ".sliderItem",
activeSlideClass: ".sliderItem__active",
points: ".slider__nav input",
prev: ".footerSliderItem__prev",
next: ".footerSliderItem__next",
pointNavigation: true,
});
featuresSlider.init();
};
Конструктор :
function Slider(settings){
this.el = document.querySelector(settings.element);
this.init();
}
Прототип:
Slider.prototype = {
init: function () {
let slidesCounter = 0;
if(! (settings.pointNavigation)){
this.points = document.querySelectorAll(settings.points);
this.navigatePoints();
}
this.slides = document.querySelectorAll(settings.slides);
this.prev = document.querySelector(settings.prev);
this.next = document.querySelector(settings.next);
this.prev.onclick = prev;
this.next.onclick = next;
},
navigatePoints : function () {
let self = this;
for(let i = 0, length = this.points.length; i < length; i++){
let point = this.points[i];
point.addEventListener("click", function (e) {
self.slide(this);
});
}
},
prev: function() {
self.slides[slidesCounter].classList.remove(settings.activeSlideClass);
slidesCounter--;
if(slidesCounter < self.slides.length){
slidesCounter = self.slides.length - 1;
}
self.slides[slidesCounter].classList.add(settings.activeSlideClass);
},
next: function() {
self.slides[slidesCounter].classList.remove(settings.activeSlideClass);
slidesCounter++;
if(slidesCounter <= self.slides.length){
slidesCounter = 0;
}
self.slides[slidesCounter].classList.add(settings.activeSlideClass);
},
slide: function (element) {
this.setCurrentInput(element);
if(! (settings.pointNavigation)){
this.setCurrentLink(element);
let index = parseInt(element.getAttribute("data-slide"), 10) +1;
let currentSlide = this.el.querySelector(settings.wrapper + `:nth-child(${index})`);
let activeSlide = this.el.querySelector(settings.activeSlideClass);
if(! (currentSlide.classList.contains(settings.activeSlideClass))){
return;
}
activeSlide.classList.remove(settings.activeSlideClass);
currentSlide.classList.add(settings.activeSlideClass);
}
},
setCurrentInput: function (input) {
let parent = input.parentNode;
let inputs = parent.querySelectorAll("input");
input.className = "slider__navPoint slider__navPoint_active";
this.currentElement = input;
for(let i = 0, length = inputs.length; i < length; ++i){
let cur = inputs[i];
if (cur !== input){
cur.className = "slider__navPoint";
}
}
}
};
Заранее спасибо за участие )
