JavaScript Carousel from Json File

I am trying to build a JavaScript carousel from a JSON file that has two buttons on the side and for each image to have a caption.

This is what I currently have:

All my images are being shown at once???

My Images

here is index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Cabin&display=swap" rel="stylesheet">
    <script defer src="js/app.js" ></script>
    <script defer src="js/Carousel.js" ></script>
    <title>CubePro</title>
</head>
<body>
    <nav class="nav-menu">
        <h1 class="heading">CubePro</h1>
        <ul>
            <li><a href="index.html"class="colour-orange">Home</a></li>
            <li><a href="Three.html"class="colour-red">3*3</a></li>
            <li><a href="Two.html"class="colour-purple">2*2</a></li>
            <li><a href="Timer.html"class="colour-dark-purple">Timer</a></li>
        </ul>
    </nav>

    <div class="carousel">
      <button class="carousel-button prev" id="carouselPrev">&#8656;</button>
      <button class="carousel-button next" id="carouselNext">&#8658;</button>
      <div class="carousel-images" id ="carouselImages"></div>
      <p class="caption" id = "caption"></p> 
    </div>
      

    <h1 class="title2">Begin Your Cubing Success</h1>
    <div id="image_url_1"></div>
    <h1 class="getstarted"><a href="Three.html">Get Started Now!!</a></h1>
    <p class="paragraph">Solving a Rubiks Cube has never been better and easier</p>
</body>
</html>

Here is my CSS:

.carousel {
  width: 100%;
  height: 100%;
  position: relative;
}

.carousel-images{
  position: absolute;
  z-index: 1;
  left: 0;
  width: auto;
  height: 100px;
  transition: left 0.5s ease-in-out;
}

.carousel img{
  width: auto;
  height: 100px;
}

.carousel-button {
  position: absolute;
  z-index: 2;
  background: none;
  border: none;
  font-size: 4rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, .5);
  cursor: pointer;
  border-radius: .25rem;
  padding: 0 .5rem;
  background-color: rgba(0, 0, 0, .1);
}

.carousel-button:hover,
.carousel-button:focus {
  color: white;
  background-color: rgba(0, 0, 0, .2);
}

.carousel-button.prev {
  left: 1rem;
}

.carousel-button.next {
  right: 1rem;
}

.caption{
  position: absolute;
  z-index: 3;
  bottom: 0;
  text-align: center;
  width: 100%;
  color: white;
  background-color: rgba(0,0,0,0.25);
  height: 50px;
  line-height: 50px;
}

And here is my JavaScript:

var images  = document.getElementById("carouselImages");
var caption  = document.getElementById("captions");
var prev = document.getElementById("carouselPrev");
var next  = document.getElementById("carouselNext");

fetch("js/images.json").then(function(res){
  if (!res.ok) {
    alert("No json found.");
    throw new Error("No json found.");
  }
  res.json().then(function(json){
    json.forEach(function(el){
      var image = document.createElement('img'); 
      image.setAttribute("src", el.imageSrc);
      image.setAttribute("alt", el.caption);
      image.setAttribute("title", el.caption);
      images.appendChild(image);
    })
    setupCarousel(json);
  })
})

function setupCarousel(json){
  var imageCount = json.length;
  var currentImage = 1;
  var imageWidth = 500;
  
  prev.addEventListener('click', function(){
    if(currentImage !== 1){
      currentImage--;
      images.style.left = imageWidth - currentImage * imageWidth + "px";
    }
    caption.innerText = json[currentImage - 1].caption;
  });

  next.addEventListener('click', function(){
    if(currentImage !== imageCount){
      currentImage++;
      images.style.left = imageWidth - currentImage * imageWidth + "px";
      caption.innerText = json[currentImage - 1].caption;
    }
  });

  caption.innerText = json[currentImage - 1].caption;

}

How can I get my images to appear 1 at a time?