单击时如何让轮播指示器按钮响应？

Question

我无法使用位于轮播下方的指示按钮滚动浏览图像。多次梳理代码后，我意识到困难在于无法将轮播类连接到指示器按钮。除了在脚本部分列出它之外，我还尝试使轮播处于活动状态，但我的尝试没有成功。我对箭头没有问题，只是转盘下方的指示按钮点。我不确定我做错了什么。提前谢谢你。

function goRight() {
  document.querySelector(".carousel-container").scrollLeft += 640;
}
function goLeft() {
  document.querySelector(".carousel-container").scrollLeft -= 640;
}

  

var btn = document.getElementsByClassName("btn");
var slide = document.getElementById("slide")

btn[0].onclick = function() {
  slide.style.transform = "translateX(0px)";
  for (i = 0; i < 4; i++) {
    btn[i].classList.remove("active");
  }
  this.classList.add("active");
}
btn[1].onclick = function() {
  slide.style.transform = "translateX(-670)";
  for (i = 0; i < 4; i++) {
    btn[i].classList.remove("active");
  }
  this.classList.add("active");
}
btn[2].onclick = function() {
  slide.style.transform = "translateX(-1340)";
  for (i = 0; i < 4; i++) {
    btn[i].classList.remove("active");
  }
  this.classList.add("active");
}

.main_3 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 10rem;
}

.carousel-container {
  display: flex;
  flex-direction: row;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  margin: 5rem;
  width: 640px;
  overflow: hidden;
}

.carousel {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.main-slide {
  height: 100%;
}

.main-slide>img {
  height: 100%;
}

.slide-show {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 310px;
  padding: 35px;
}

h1 {
  text-align: center;
  font-size: 25px;
  margin-bottom: 5rem;
  margin-right: 6rem;
}

.slide-show>p {
  font-size: 20px;
  color: #000000
}

.cta-btn-case-study {
  color: #ffffff;
  background-color: #000000;
  font-size: 20px;
  font-weight: bold;
  padding: 10px 25px 10px 25px;
  margin-top: 5rem;
  margin-right: 5rem;
}

.arrow>img {
  margin-top: 20rem;
  width: 100%;
  height: 20vh;
}

.main-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 240px;
  height: 500px;
  margin-right: 50px;
  margin-bottom: 5rem;
}

.indicator {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
}

.btn {
  display: inline-block;
  height: 15px;
  width: 15px;
  background: #000000;
  margin: 4px;
  cursor: pointer;
  transition: 0.5s;
}

.indicator>.active {
  width: 45px;
}

<section class="main_3">
 <div class="arrow">
            <img src="img/Left_arrow.png" alt="go to previous slide" >
        </div>
  </div>
  <div class="carousel-container" id="slide">
    <div class="carousel">
      <div class="main-slide"><img src="http://placehold.it/360x150" alt="Dummy Image" />
      </div>
      <div class="slide-show">
        <h1>Medical App</h1>
        <p>Lorem ipsum dolor sit amet. Et consequatur impedit et facere beatae aut aliquam sint eum quos delectus eum pariatur quia sed obcaecati itaque nam alias repudiandae.</p>
        <a href="Projects.html"><button class="cta-btn-case-study">View Case Study</button></a>
      </div>
    </div>
    <div class="carousel">
      <div class="main-slide"><img src="http://placehold.it/360x150" alt="Dummy Image" />
      </div>
      <div class="slide-show">
        <h1>Fitness App</h1>
        <p>Lorem ipsum dolor sit amet. Et consequatur impedit et facere beatae aut aliquam sint eum quos delectus eum pariatur quia sed obcaecati itaque nam alias repudiandae.</p>
        <a href="Projects.html"><button class="cta-btn-case-study">View Case Study</button></a>
      </div>
    </div>
    <div class="carousel">
      <div class="main-slide"><img src="http://placehold.it/360x150" alt="Dummy Image" />
      </div>
      <div class="slide-show">
        <h1>Sports Betting App</h1>
        <p>Lorem ipsum dolor sit amet. Et consequatur impedit et facere beatae aut aliquam sint eum quos delectus eum pariatur quia sed obcaecati itaque nam alias repudiandae.</p>
        <a href="Projects.html"><button class="cta-btn-case-study">View Case Study</button></a>
      </div>
    </div>
  </div>

  <div class="arrow">
            <img src="img/Right_arrow.png" alt="go to next slide" >
        </div>

</section>
<div class="indicator">
  <span class="btn active"></span>
  <span class="btn"></span>
  <span class="btn"></span>
  <span class="btn"></span>
</div>