Keep getting Uncaught ReferenceError: nextSlide is not defined and Uncaught ReferenceError: prevSlide is not defined

I’m trying to setup a simple 4 slide slideshow, but cant seem get get the slides defined and the ‘next’ and ‘prev’ button to work every time.

I’m new to javascript. It doesn’t seem to want me to post more code, but please let me know if you need the CSS.

<div class="TRACEhomeslider-container">
  <div class="TRACEhomeslider-navigation-container">
    <button class="TRACEhomeslider-nav-arrow TRACEhomeslider-prev" onclick="prevSlide()">
      <img src="https://imagedelivery.net/Dm4SjjHdI1AmGqmp0CD9RQ/7131a27f-82a1-4be1-0fb1-623ef0dc0d00/public" alt="Previous">
    </button>
  </div>
  <div class="TRACEhomeslider-slider">
    <div class="TRACEhomeslider-slides">
      <div class="TRACEhomeslider-slide" id="slide1">
        <div class="TRACEhomeslider-slide-content">
          <img src="https://picsum.photos/300/500?random=1" alt="Random Image 1">
          <div>
            <h2>My Badges and Awards</h2>
            <p>Check out your completion badges, view your awards, and share your accomplishments on social media</p>
            <button>Lea`your text`rn More</button>
          </div>
        </div>
      </div>
      <div class="TRACEhomeslider-slide" id="slide2">
        <div class="TRACEhomeslider-slide-content">
          <img src="https://picsum.photos/300/500?random=2" alt="Random Image 2">
          <div>
            <h2>Dog's Awards</h2>
            <p>Explore the badges and awards earned by this diligent dog.</p>
            <button>Discover More</button>
          </div>
        </div>
      </div>
      <div class="TRACEhomeslider-slide" id="slide3">
        <div class="TRACEhomeslider-slide-content">
          <img src="https://picsum.photos/300/500?random=3" alt="Random Image 3">
          <div>
            <h2>Hamster's Trophies</h2>
            <p>Find out about the trophies won by this hard-working hamster.</p>
            <button>Learn More</button>
          </div>
        </div>
      </div>
      <div class="TRACEhomeslider-slide" id="slide4">
        <div class="TRACEhomeslider-slide-content">
          <img src="https://picsum.photos/300/500?random=4" alt="Random Image 4">
          <div>
            <h2>Bird's Achievements</h2>
            <p>Discover the amazing achievements of this talented bird.</p>
            <button>Find Out More</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="TRACEhomeslider-navigation-container">
    <button class="TRACEhomeslider-nav-arrow TRACEhomeslider-next" onclick="nextSlide()">
      <img src="https://imagedelivery.net/Dm4SjjHdI1AmGqmp0CD9RQ/03165062-4249-449d-72cb-c35efa7b1000/public" alt="Next">
    </button>
  </div>
</div>

let currentSlide = 0;
const slides = document.querySelectorAll('.TRACEhomeslider-slide');
const totalSlides = slides.length;

function showSlide(slideIndex) {
  slides.forEach((slide, index) => {
    slide.style.transform = `translateX(${(index - slideIndex) * 100}%)`;
  });
}

function nextSlide() {
  currentSlide = (currentSlide + 1) % totalSlides;
  showSlide(currentSlide);
}

function prevSlide() {
  currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
  showSlide(currentSlide);
}

// Define the functions globally
window.nextSlide = nextSlide;
window.prevSlide = prevSlide;

document.addEventListener('DOMContentLoaded', () => {
  showSlide(currentSlide);
});