通过单击按钮更改图像

Question

我有 3 张图像堆叠在一起，我希望在单击上一个和下一个按钮时更改它们。我是一个完整的初学者，我不知道我该怎么做。我到处搜索，但仍然不明白为什么我失败了

    <div class="bg1container">
      <img class="hero1" src="images/desktop-image-hero-1.jpg" alt="">
      </div>
      <div class="bg2container">
        <img class="hero2" src="images/desktop-image-hero-2.jpg" alt="">
      </div>
      <div class="bg3container">
        <img class="hero3" src="images/desktop-image-hero-3.jpg" alt="">
      </div>
  </div>
  <div class="containertopright">
    <div class="title">
      <h1>Discover innovative ways to decorate</h1>
    </div>
    <div class="subtitle">
      <p>
        We provide unmatched quality, comfort, and style for property owners across the country.
        Our experts combine form and function in bringing your vision to life. Create a room in your
        own style with our collection and make your property a reflection of you and what you love.
      </p>
    </div>
    <div class="shopcontainer">
      <a href="#">S H O P N O W <img src="./images/icon-arrow.svg"> </a>
    </div>
  </div>
  <div class="buttonscontainer">
    <div class="left">
      <button aria-label="slide-left"><img src="./images/icon-angle-left.svg" alt="left"></button>
    </div>
    <div class="right">
      <button aria-label="slide-right"><img src="./images/icon-angle-right.svg" alt="right"></button>
    </div>
  </div>

Javascript

const slides = Array.from(background.children);
i= 0;
const prevButton = document.querySelector(".left");
const nextButton = document.querySelector(".right");

prevButton.addEventListener("click", function(changeImage){
  if (slides [0])
  return "slides[2]";
}