我需要有关我正在尝试构建的旋转木马的帮助

Question

有人可以帮助我吗？ 我正在尝试构建一个应用程序，但仍在做 html、css 和 js 方面的事情。我希望图像轮播正常工作，但没有。你能检查我的代码看看我做错了什么吗？

非常感谢

请看下面的代码。我期待轮播自动工作

document.addEventListener("DOMContentLoaded", function() {
  // Select the carousel container and the buttons
  const carouselSlide = document.querySelector(".carousel-slide");
  const prevBtn = document.querySelector("#prevBtn");
  const nextBtn = document.querySelector("#nextBtn");

  // Select all the images in the carousel
  const images = document.querySelectorAll(".carousel-slide img");

  // Set the initial slide position
  let counter = 1;
  const size = images[0].clientWidth;
  carouselSlide.style.transform = `translateX(${-size * counter}px)`;

  // Add event listeners to the buttons
  nextBtn.addEventListener("click", () => {
    if (counter >= images.length - 1) return;
    carouselSlide.style.transition = "transform 0.4s ease-in-out";
    counter++;
    carouselSlide.style.transform = `translateX(${-size * counter}px)`;
  });

  prevBtn.addEventListener("click", () => {
    if (counter <= 0) return;
    carouselSlide.style.transition = "transform 0.4s ease-in-out";
    counter--;
    carouselSlide.style.transform = `translateX(${-size * counter}px)`;
  });

  // Add event listener to handle when the transition ends
  carouselSlide.addEventListener("transitionend", () => {
    if (images[counter].id === "lastClone") {
      carouselSlide.style.transition = "none";
      counter = images.length - 2;
      carouselSlide.style.transform = `translateX(${-size * counter}px)`;
    }
    if (images[counter].id === "firstClone") {
      carouselSlide.style.transition = "none";
      counter = images.length - counter;
      carouselSlide.style.transform = `translateX(${-size * counter}px)`;
    }
  });
});

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

header {
  background-color: #ffa500;
  color: white;
  text-align: center;
  padding: 10px;
}

nav {
  background-color: #ffdab9;
  text-align: center;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
}

nav a:hover {
  background-color: #ffa500;
  color: white;
}

main {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

img {
  width: 435.3px;
  height: 290.2px;
}

.recipe {
  margin: 20px;
  padding: 10px;
  box-shadow: 0px 0px 10px #999;
  border-radius: 5px;
  text-align: center;
}

.recipe img {
  width: 200px;
  height: 200px;
  border-radius: 5px;
  object-fit: cover;
}

.recipe h3 {
  margin: 10px 0;
}

footer {
  background-color: #ffdab9;
  color: #333;
  text-align: center;
  padding: 10px;
}


/* Carousel */

.carousel-container {
  position: relative;
  margin: 50px auto;
  width: 80%;
  height: 400px;
  overflow: hidden;
}

.carousel-slide {
  display: flex;
  width: 100%;
  height: 100%;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
}

.carousel-prev {
  left: 0;
}

.carousel-next {
  right: 0;
}

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Recipes</a></li>
    <li><a href="#">Categories</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>
<main>
  <section>
    <div class="carousel-container">
      <div class="carousel-slide">
        <img src="images/jollof.jpg" />
        <img src="images/poundo.jpg" />
        <img src="images/puffpuff.jpg" />
        <img src="images/suya.jpg" />
      </div>
      <a class="carousel-prev">&#10094;</a>
      <a class="carousel-next">&#10095;</a>
    </div>
  </section>
  <section class="featured">
    <h2>Featured Recipe - Jollof Rice</h2>
    <img src="images/jollof.jpg" alt="Featured Recipe - Jollof Rice" />
    <h3>Jollof Rice</h3>
    <p>One of the most enjoyed cuisines of West Africa.</p>
    <a href="#" class="button">View Recipe</a>
  </section>
  <section class="latest">
    <h2>Latest Recipes</h2>
    <ul>
      <li>
        <img src="images/poundo.jpg" alt="Recipe 1" />
        <h3>Pounded Yam</h3>
        <a href="#">View Recipe</a>
      </li>
      <li>
        <img src="images/puffpuff.jpg" alt="Recipe 2" />
        <h3>Puffpuff</h3>
        <a href="#">View Recipe</a>
      </li>
      <li>
        <img src="images/suya.jpg" alt="Recipe 3" />
        <h3>Suya</h3>
        <a href="#">View Recipe</a>
      </li>
    </ul>
  </section>
  <section class="categories">
    <h2>Categories</h2>
    <ul>
      <li><a href="#">Yoruba Recipes</a></li>
      <li><a href="#">Igbo Recipes</a></li>
      <li><a href="#">Hausa Recipes</a></li>
      <li><a href="#">Ghanaian Recipes</a></li>
      <li><a href="#">Cameroonian Recipes</a></li>
      <li><a href="#">Other African Recipes</a></li>
    </ul>
  </section>
</main>
<footer>
  <p>&copy; 2023 West African Recipe App</p>
</footer>