html – JavaScript carousel slider doesn’t work after second slide.

I’m trying to make a JS carousel, and it works to some extent, but not enough. After I click the ‘right’ button, it slides to the second slide, but when I click it again, it gives the error ‘can read indefinite properties’ (read ‘add’). I think this is to add an ‘active’ class to the next slide, but I don’t seem to understand what I’m doing wrong. When I try to click on the third slide, ‘can’t read Noel’s properties’ (‘ read nextElementSibling ‘)’ also gives an error.

// CAROUSEL
const carousel = document.querySelector(".cards-wrapper");
const slides = [...carousel.children];
const nextButton = document.querySelector(".button-right");
const previousButton = document.querySelector(".button-left");

let slideWidth = slides[0].getBoundingClientRect();

function positionSlides(slides) {
  for (let index = 0; index < slides.length; index++) {
    slides[index].style.left = slideWidth * index + "px";
  }
}

positionSlides(slides);

nextButton.addEventListener("click", () => {
  const currentSlide = carousel.querySelector(".active");
  const nextSlide = currentSlide.nextElementSibling.getBoundingClientRect();

  const position = nextSlide.width;
  console.log(position);
  carousel.style.transform = `translateX(-${position}px)`;

  currentSlide.classList.remove("active");
  nextSlide.classList.add("active");
});


<div class="carousel">
          <div class="cards-wrapper">
            <div class="card active">
              <picture>
                <img src="https://s3.envato.com/files/158241052/1.jpg" alt="" />
              </picture>
              <h3>Slide 1</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Id
                perspiciatis cumque consectetur vero eaque inventore fuga, nobis
                reiciendis repudiandae, eius quo odio rem, esse saepe fugiat
                quos deserunt dignissimos dolorem.
              </p>
            </div>
            <div class="card">
              <picture>
                <img src="https://s3.envato.com/files/158241052/1.jpg" alt="" />
              </picture>
              <h3>Slide 2</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Id
                perspiciatis cumque consectetur vero eaque inventore fuga, nobis
                reiciendis repudiandae, eius quo odio rem, esse saepe fugiat
                quos deserunt dignissimos dolorem.
              </p>
            </div>
            <div class="card">
              <picture>
                <img src="https://s3.envato.com/files/158241052/1.jpg" alt="" />
              </picture>
              <h3>Slide 3</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Id
                perspiciatis cumque consectetur vero eaque inventore fuga, nobis
                reiciendis repudiandae, eius quo odio rem, esse saepe fugiat
                quos deserunt dignissimos dolorem.
              </p>
            </div>
          </div>
          <button class="button-left">left</button>
          <button class="button-right">right</button>
          <div class="carousel-nav">
            <button class="active">1</button>
            <button>2</button>
            <button>3</button>
          </div>
        </div>

Any ideas?

Write a Comment