Не работает перебор элементов в классе. Что делать?

Question

[Максим Призов]

Пробую сделать слайдер одним классом.
Функция showSlider() работает, а функция nextSlide(), вызываемая по клику на кнопку, при выполнении, выдает ошибку(Uncaught TypeError: Cannot read properties of undefined (reading 'forEach') at HTMLDivElement.nextSlide), что не может выполнить перебор к незаданному значению, потому что, как я понимаю, контекст вызова у нее другой, как лучше поступить в данной ситуации?

class Slider {
    constructor(slides, btnNext, btnPrev, counterMax, counterActive) {
      this.slides = document.querySelectorAll(slides);
      this.btnNext = document.querySelector(btnNext);
      this.btnPrev = document.querySelector(btnPrev);
      this.counterMax = document.querySelector(counterMax);
      this.counterActive = document.querySelector(counterActive);
    }
    showSlide(number = 0) {
      this.slides.forEach((item, i) => {
        if (i != number) {
          item.classList.add("hide");
          item.classList.remove("show", "fade");
        } else {
          item.classList.remove("hide");
          item.classList.add("show", "fade");
        }
      });
      if (number > 10) {
        this.counterActive.textContent = ++number;
      } else {
        this.counterActive.textContent = "0" + ++number;
      }
    }
    nextSlide() {
      let slideActive;
      this.slides.forEach((item, i) => {
        if (item.classList.contains("show", "fade")) {
          slideActive = i;
        }
      });
      if (slideActive == this.slides.length - 1) {
        this.showSlide(0);
      } else {
        this.showSlide(++slideActive);
      }
    }
    sliderInit() {
      if (this.slides.length > 10) {
        this.counterMax.textContent = this.slides.length;
      } else {
        this.counterMax.textContent = "0" + this.slides.length;
      }
      this.showSlide();
      this.btnNext.onclick = this.nextSlide;
      this.btnPrev.onclick = this.prevSlide;
    }
  }
  const sliderEat = new Slider(
    ".offer__slide",
    ".offer__slider-next",
    ".offer__slider-prev",
    "#total",
    "#current"
  );
  sliderEat.sliderInit();

<div class="offer__slider">
                <div class="offer__slider-counter">
                    <div class="offer__slider-prev">
                        <img src="icons/left.svg" alt="prev">
                    </div>
                    <span id="current">03</span>
                    /
                    <span id="total">04</span>
                    <div class="offer__slider-next">
                        <img src="icons/right.svg" alt="next">
                    </div>
                </div>
                <div class="offer__slider-wrapper">
                    <div class="offer__slide">
                        <img src="img/slider/pepper.jpg" alt="pepper">
                    </div>
                    <div class="offer__slide">
                        <img src="img/slider/food-12.jpg" alt="food">
                    </div>
                    <div class="offer__slide">
                        <img src="img/slider/olive-oil.jpg" alt="oil">
                    </div>
                </div>
            </div>

Answer 1

[0xD34F]

Такие ваши варианты:

1. nextSlide() { ---> nextSlide = () => {
   
2. .onclick = this.nextSlide; ---> .onclick = () => this.nextSlide();
   
3. .onclick = this.nextSlide; ---> .onclick = this.nextSlide.bind(this);
   

Ну и конечно же бегом гуглить, разбираться - когда какое значение имеет this.

Comments

[Максим Призов]

Спасибо)