单击时如何让轮播指示器按钮响应？单击指示器按钮时，图像左右无响应

Question

我可以使用箭头滚动。但是，我无法使用指示器按钮滚动图像。箭头用于台式机和笔记本电脑视图，但当我使其响应时，指示器按钮将用于滚动浏览图像。我也相信 overflow:hidden 也在干扰它正常运行的能力。我这样说的原因是因为当我删除 overflow:hidden 时，当我将它设置为正确的 slide.style.transform = "translateX(-670)" 和 slide.style.transform = "translateX(-1340) 时它正在滚动”。随后，我 将旋转木马放回溢出：使用 slide.style.transform 设置隐藏，但第一张图像向左滑动，没有其他图像拖曳。

<section class="main_3">
            <div class="arrow">
                <img src="img/Left_arrow.png" alt="go to previous slide" onclick="goLeft()">
            </div>
            <div class="carousel-container" id="slide">
                <div class="carousel" >
                    <div class="main-slide"><img src="img/Medicine.png" alt="Medical 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="img/Fitness_img.png" alt="Fitness 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="img/Sports_betting_img.png" alt="Sports Betting 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" onclick="goRight()">
            </div>

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


.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: #ffffff;
  margin: 4px;
  cursor: pointer;
  transition: 0.5s;
}

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

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