Здравствуйте, прошу помощи, объяснений, примеров..) Пишу слайдер своими силами для сайта (намеренно не использую библиотеки) на чистом js по возможности универсальный.
Решил сделать прототип класса для слайдера, их несколько на странице, вроде бы все нормально работает, но не могу повесить (или понять почему не работает) событие onclick на div при котором будет отрабатываться метод экземпляра класса - scrollLeft(arrg). Этот же метод используется и в другом методе - enableAutoScroll(), который работает! Должно быть дело в оформлении кода.
В общем разметка такая:
<div class="slider relation" id="slider-1"> // Слайдер
<div class="relation_ratio ratio-4x1"></div> // Адаптива
<div class="relation_content"> // Контент
<div class="slider_btn slider_left"></div> // Кнопка - влево
<div class="slides_line"> // Пикчи
// <a>image</a>
// ...
</div>
<div class="slider_btn slider_right"></div> // Кнопка - вправо
</div>
</div>
Класс и проблемный метод setButtonsEvent:
Slider = function(id_name) {
this.id_name = id_name;
this.auto_scroll = 0;
this.offset = 0;
this.timeoutId = undefined;
this.number_of_childes = this.getSlidesLine().children.length;
this.getSlidesLine().style.left = this.offset + "%";
this.setButtonsEvent();
}
Slider.prototype.setButtonsEvent = function() {
this.getLeftButton().addEventListener('click', this.scrollLeft(3));
// Property 'handleEvent' is not callable.
this.getRightButton().onclick = this.scrollRight();
// Не работает
// Пробовал просто "this.scrollRight;" - тогда при загрузке страницы просто выполняется эта функция (прокручивает слайдер один раз) и по нажатию также ничего не происходит. Но при этом сообщает, что "this.getSlidesLine is not a function"
return this;
}
В классе присутствуют методы для получения объектов, типа:
Slider.prototype.getSlidesLine = function() {
return document.querySelector("#" + this.id_name + " > .relation_content > .slides_line");
};
Slider.prototype.getLeftButton = function() {
return document.querySelector("#" + this.id_name + " > .relation_content > .slider_btn.slider_left");
};
Slider.prototype.getRightButton = function() {
return document.querySelector("#" + this.id_name + " > .relation_content > .slider_btn.slider_right");
};
ну и сам scrollLeft:
Slider.prototype.scrollLeft = function(divider = 3) {
if(Math.abs(this.offset) / 100 >= this.number_of_childes / divider - 1) this.offset = 0;
else this.offset -= 100;
this.getSlidesLine().style.left = this.offset + "%";
return this;
};
Так же буду рад замечаниям по поводу оформления строк кода.
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости