Здравствуйте, прошу помощи, объяснений, примеров..) Пишу слайдер своими силами для сайта (намеренно не использую библиотеки) на чистом 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;
};
Так же буду рад замечаниям по поводу оформления строк кода.
Виртуальный выделенный сервер (VDS) становится отличным выбором
Если заполняется один из блоков, то оба блока принимают наибольшую высотуВариант с фиксированной высотой не подойдет
Нужно добавить атрибут defer при загрузке страницы всем <script>-амТаким образом хочу ускорить загрузку страницы
Хочу поменять стиль элементу на странице, который соответствует выбранному (у них одинаковый параметр idEv)Пробую так: