@KononovD

Что надо исправить, что бы заработал самописный слайдер на js?

Здравствуйте, имеем следующий код
https://codepen.io/Kononov_D/pen/GeWBbN?editors=1010

Захотел я практики js, решил писать свой слайдер, кривенько-косенько, но написал, довольный сидел)
потом я подумал: "а что, если я хочу 2 или больше слайдеров к себе на страницу? копипастить код?"
Я призадумался и решил положить свой слайдер в класс, что бы потом работать с экземплярами этого класса.

И вот в чем проблема:
создание экземпляра, передача параметров, инициализация слайдера - все хорошо...
а потом, из экземпляра как будто удаляются поля, которые я создавал в конструкторе и в консоли ошибки рода "Cannot read property 'click' of undefined"
Причем, навесить событие на кнопки - я могу, они есть, а когда дело доходит до клика на эти кнопки - в переменных их уже нет... что делать?

В codePen внизу так же есть рабочий, не ООП(функционалный) варинат.

кстати, как передавать объект в конструктор?)

велика вероятность, что я где-то с контекстом вызова намудрил, но если убрать this. - ругается, что переменная не найдена..
  • Вопрос задан
  • 140 просмотров
Решения вопроса 1
@StockholmSyndrome
когда навешиваете обработчики на элементы, например, здесь:
img.addEventListener("mouseover", this.stopAutoplay);

теряется контекст, поэтому нужно так:
img.addEventListener("mouseover", this.stopAutoplay.bind(this));


здесь он тоже теряется
this.autoplayInterval = setInterval(function() {
  this.sliderNext.click();
}, this.sliderDelay);

поэтому либо используйте стрелочную функцию:
this.autoplayInterval = setInterval(() => {
  this.sliderNext.click();
}, this.sliderDelay);

либо опять же метод bind:
this.autoplayInterval = setInterval(function() {
  this.sliderNext.click();
}.bind(this), this.sliderDelay);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы