How can I get the carousel indicator buttons to respond when clicked? The images aren't responding left and right when indicator buttons are clicked.

See more:

Javascript

CSS

HTML

I am unable to scroll through the images using the indicator buttons that are located below the carousel. After combing through the code several times, I realize the difficulty stems from not being able to connect the carousel class to the indicator buttons. I don't have an issue with the arrows just the indicator button dots below the carousel. I'm not sure what I'm doing incorrectly. Thank you in advance.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    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");
    }

<!-- language: lang-css -->

    .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;
    }

<!-- language: lang-html -->

    <section class="main_3">
      <div class="arrow">
        <img src="http://placehold.it/150" alt="go to previous slide" onclick="goLeft()">
      </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="http://placehold.it/150" alt="go to next slide" onclick="goRight()">
      </div>

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

<!-- end snippet -->

What I have tried:

I have tried making the carousel active as well in addition to listing it in the script section but was unsuccessful in my attempts.

. I have also tried placing the indicator buttons in the carousel but it scrolls along with the images.