0

so im trying to add an interactive slide show in my website with javascript, but there is a problem in the console. It doesnt say there is a problem in VSCODE, but when i launch the website, the slide show doesnt work.

Here is the code-

var slides = document.querySelector('.slider-items').children;
var nextSlide = document.querySelector(".right-slide");
var prevSlide = document.querySelector(".left-slide");
var totalSlides = slides.length;
var index = 0;

nextSlide.onclick = function() {
  next("next")
}
prevSlide.onclick = function() {
  next("prev")
}

function next(direction) {


  if (direction == "next") {
    index++;
    if (index == totalSlides) {
      index = 0;
    }
  } else {
    if (index == 0) {
      index = totalSlides - 1;
    } else {
      index--;
    }
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].classList.remove("active");
  }
  slides[index].classList.add("active");

}

The error states:

Uncaught TypeError: Cannot read property 'children' of null

I need help pls

Alexander Nied
  • 12,804
  • 4
  • 25
  • 45
David DC
  • 1
  • 1
  • 3
    Where in the HTML file are you including the script? Does `document.querySelector('.slider-items')` exist in the DOM? – Phix Aug 30 '21 at 16:56
  • 3
    From the error message, it is clear that - `document.querySelector('.slider-items')` is null, update your question with the html please if you can. – satvik choudhary Aug 30 '21 at 16:59
  • Is your ` – Sebastian Simon Aug 30 '21 at 17:05

0 Answers0