Почему не работает слайдер?

Question

[Lia Sav]

Подскажите, пожалуйста, где ошибка

<main>
      <div class="sliders">
        <div class="slide"></div>
        <div class="slide"></div>
      </div>
      <div class="menu">
          <button type="button" class="controls" id="prev">
            <img src="images/img/left_arrow.png" alt="left arrow" />
          </button>
          <button type="button" class="controls" id="next">
            <img src="images/img/right-arrow.png" alt="right arrow" />
          </button>
        </div>
</main>

main {
  position: relative;
  height: 67.5rem;
  overflow: hidden;
}
main .sliders {
  height: 100%;
}
main .sliders .menu {
  position: absolute;
  top: 51.5rem;
  left: 11.25rem;
  z-index: 3;
}
main .sliders .menu button {
  outline: #fff;
  border: 2px solid #fff;
  background-color: inherit;
  -webkit-transform: skew(-25deg);
  -moz-transform: skew(-25deg);
  -o-transform: skew(-25deg);
  transform: skew(-25deg);
}
main .sliders .menu button:last-child {
  margin-left: 0.75rem;
}
main .sliders .menu button img {
  margin: 1.5rem 0.75rem;
}
main .sliders .menu button:hover,
main .sliders .menu button:focus {
  background-color: #9accc2;
}
main .slide {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: 2;
  transition: opacity 1s;
}
.showing {
  opacity: 1;
  z-index: 3;
  animation-timing-function: ease-in
}
main .slide:nth-of-type(1) {
  background: url("../images/bg/main_bg.jpg") center center/cover no-repeat;
}
main .slide:nth-of-type(2) {
  background: url("../images/bg/main_bg.jpg") center center/cover no-repeat;
}

var controls = document.querySelectorAll(".menu");
for (var i = 0; i < controls.length; i++) {
  controls[i].style.display = "inline-block";
}

var slides = document.querySelectorAll(".slides .slide");
var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 2000);

function nextSlide() {
  goToSlide(currentSlide + 1);
}

function previousSlide() {
  goToSlide(currentSlide - 1);
}
function goToSlide(n) {
  slides[currentSlide].className = "slide";
  currentSlide = (n + slides.length) % slides.length;
  slides[currentSlide].className = "slide showing";
}
var next = document.getElementById("next");
var previous = document.getElementById("prev");

next.onclick = function () {
  nextSlide();
};
previous.onclick = function () {
  previousSlide();
};

Comments

[Денис Инешин]

Добавьте ссылку на Jsfiddle например. Так будет гораздо проще найти ошибку