我不能得到自定義編碼(HTML，CSS和ampJavascript)轉盤/滑塊在我的網頁上工作(relationshipdynamics (dot) com)。我正在使用Go高級拖放web builder來創建包含自定義代碼元素的頁面，該元素支持Javascript、HTML和CSS。我有其他自定義代碼元素在頁面上工作。我被難住了，Chat Gpt4也是。我知道CSS和一些HTML，但我真的不知道任何Javascript，所以記住這一點。感謝任何幫助。

問題

下一張幻燈片(2)的大約20px顯示在最右邊的分區(下一個圖標)。我使用了盒子大小，溢出隱藏，使用flex等，所以不能找出什么是不工作的。

點，前& amp下一個圖標是不可點擊的，滑塊在6000毫秒后不會滾動到下一張幻燈片，所以看起來沒有動畫。

HTML CSS & ampJavascript代碼

[Message was too long had to omit html]

<style>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.carousel {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  padding: 0 30px; /* Added padding to move chevrons outside */
}

.slides-container {
  display: flex;
  width: 100%;
  transition: transform 0.5s;
  flex-direction: row;
  flex-wrap: nowrap;
}

.slide {
  flex: 0 0 100%;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  flex-shrink: 0;
}

.column {
  padding: 10px;
  box-sizing: border-box; /* Added to ensure padding doesn't affect overall width */
}

.column.narrower {
  width: 25%; /* Adjusted width */
}

.column.wider {
  width: 75%; /* Adjusted width */
}

.testimonial-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover; /* Ensures the image fits nicely in the circle */
  margin: 0 auto; /* Centers the image */
  display: block;
}

.subtitle {
  font-family: Montserrat;
  font-weight: 600;
  color: #FFFFFF;
  text-align: center;
  padding-top: 5px;
}

.testimonial-text {
  font-family: "Open Sans Light", sans-serif;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
}

.chevron {
  position: absolute;
  width: 20px;
  height: 60px;
  color: #FFFFFF;
  background-size: cover;
  z-index: 100;
}

.chevron.prev {
  background-image: url("https://storage.googleapis.com/msgsndr/fi0Di40dhB0LWBT2pwFn/media/6477b5c3ac275ec5d5fe0917.png");
  left: 0; /* Set to edge of the container */
  top: 30%;
  transform: translateY(-50%);
}

.chevron.next {
  background-image: url("https://storage.googleapis.com/msgsndr/fi0Di40dhB0LWBT2pwFn/media/6477b5c3d15d671863cbf653.png");
  right: 0; /* Set to edge of the container */
  top: 30%;
  transform: translateY(-50%);
}

.dots-container {
  position: absolute;
  bottom: 10px; /* Adjust to desired position */
  width: 100%;
  display: flex;
  justify-content: center;
}

.dot {
  width: 10px;
  height: 10px;
  background-color: #FFFFFF;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}

.dot.active {
  background-color: #f3f3f3;
}

@media (max-width: 768px) {
    /* Change the testimonial to 2 columns */
    .testimonial {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Reduce text size to 14px */
    .testimonial-subtitle,
    .testimonial-text {
        font-size: 14px;
    }
}
</style>

<script>
// JavaScript code to handle the carousel functionality
document.addEventListener("DOMContentLoaded", function() {
  const slidesContainer = document.querySelector(".slides-container");
  const prevButton = document.querySelector(".chevron.prev");
  const nextButton = document.querySelector(".chevron.next");
  const dots = Array.from(document.querySelectorAll(".dot"));

  console.log({slidesContainer, prevButton, nextButton, dots});

  let currentSlide = 0;
  let intervalId;

  function goToSlide(index) {
    slidesContainer.style.transform = `translateX(-${index * 100}%)`;
    currentSlide = index;

    // Update active dot
    dots.forEach((dot, i) => {
      if (i === index) {
        dot.classList.add("active");
      } else {
        dot.classList.remove("active");
      }
    });
  }

  function startCarousel() {
    intervalId = setInterval(goToNextSlide, 6000);
  }

  function stopCarousel() {
    clearInterval(intervalId);
  }

  function goToNextSlide() {
    currentSlide = (currentSlide + 1) % dots.length;
    goToSlide(currentSlide);
  }

  function goToPrevSlide() {
    currentSlide = (currentSlide - 1 + dots.length) % dots.length;
    goToSlide(currentSlide);
  }

  // Event listeners
  prevButton.addEventListener("click", goToPrevSlide);
  nextButton.addEventListener("click", goToNextSlide);
  dots.forEach((dot, i) => dot.addEventListener("click", () => goToSlide(i)));

  // Start the carousel
  startCarousel();
});
</script>