Почему не работает slide

Я пытаюсь написать простой слайд для сайта. Алгоритм перепроверил раз 10. Но ничего не работает. Вот мой код html

 <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 class="offer__slide">
              <img src="img/slider/paprika.jpg" alt="paprika" />
            </div>

          </div>
        </div>

вот мой код js

  const offer__slide = document.querySelectorAll(".offer__slide"),
    offer__slider__prev = document.querySelector(".offer__slider-prev"),
    offer__slider__next = document.querySelector(".offer__slider-next");
  const sliderLength = offer__slide.length; // 4
  let sliderIndex = 1;

  sliderShowing(sliderIndex);
  function sliderShowing(n) {
    if (n > sliderLength) {
      sliderIndex = 1;
    }
    if (n < 1) {
      sliderIndex = sliderLength;
    }
    offer__slide.forEach((slide) => {
      slide.style.display = "none";
    });
    offer__slide[sliderIndex - 1].style.display = "block";
  }

  function plusSlide(n) {
    sliderShowing((n += sliderIndex));
  }
  offer__slider__next.addEventListener("click", () => {
    plusSlide(1);
  });
  offer__slider__prev.addEventListener("click", () => {
    plusSlide(-1);
  });